古い業務システム改修で起きたので軽くメモ
原因
・ブラウザ上で日本語と英数字の挙動が違うため。
・日本語は一文字単位で改行ポイントがあるが、英数字は一単語から改行されるから。
→つまり連続した長い数字、英文字列がセル内にあると改行するポイントが見つからずに突き抜ける。
対処法
・テーブルセル幅を固定して、文字列折り返しを指定する。
・なんか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