浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【css】white-spaceプロパティを使って文字列を上手に折り返す

折り返し範囲が定まりません。

これは、テーブルの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内のテキストエリアで入力した半角英数字が枠をはみ出て

レイアウトを崩すことなく表示させることができました。

テキストエリアを使っていてはみ出しがレイアウトに影響が出る場合は使うべきだと思います。

  • この記事いいね! (0)