LoginSignup
6

More than 5 years have passed since last update.

長い文字列がセルを突き抜ける

Posted at

古い業務システム改修で起きたので軽くメモ

原因

・ブラウザ上で日本語と英数字の挙動が違うため。
・日本語は一文字単位で改行ポイントがあるが、英数字は一単語から改行されるから。
→つまり連続した長い数字、英文字列がセル内にあると改行するポイントが見つからずに突き抜ける。

対処法

・テーブルセル幅を固定して、文字列折り返しを指定する。
・なんかIE11でも未だにoverflow-wrapが効かないみたい。

/* テーブル幅固定 */
.table-box {
    table-layout: fixed;
    width: 100%;
}

/* 表示文字列を折り返す */
.table-box td {
    word-wrap: break-word; /* IE11用 */
    overflow-wrap: break-word;
}

参考先
http://qiita.com/n_s_y_m/items/cb29d730e63772b02475
https://w3g.jp/blog/confusing_word-break_word-wrap
http://8cmp.blog.fc2.com/blog-entry-43.html

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6