テーブル内のテキストエリア内で半角英数の長文を打つと、そのテキストエリアの範囲を
大きくはみ出してレイアウトが崩れてしまうことがあります。
ひらがなに関してはwhite-space: pre-wrap;で折り返す範囲を決めることで
はみ出しを防ぐことができますが、なぜか半角英数に至っては
折り返し範囲が定まりません。
これは、テーブルのtd内では折り返す限度が決まっておらず
テキストによって多種多様に折り返すべき領域が決まる為に起こるものだと
考えられます。 (なぜ半角英数のみダメなのかは不明)
半角英数はwhite-space: pre-wrap;で折り返せないため別の手段で
折り返しを図る必要があります。
その代用策が「word-break: break-all」になります。
word-breakは、テキストの表示範囲からテキストがあふれる場合に、改行の規定を
決めて表示させる役割を持ちます。
プロパティは以下の通り。
word-break: normal *ローマ字は改行しない
word-break: break-all; *ローマ字・ひらがな共に改行
word-break: keep-all; *CJKテキストのローマ字・ひらがな共に改行しない
この中で今回のお題に最も適するのがword-break: break-allなので、これを使いました。
他はnormalくらいしか使う機会ないかな・・・
これでテーブルのtd内のテキストエリアで入力した半角英数字が枠をはみ出て
レイアウトを崩すことなく表示させることができました。
テキストエリアを使っていてはみ出しがレイアウトに影響が出る場合は使うべきだと思います。
