テーブル内に長い文字列やコード、URLなどを表示した際に、「意図せず改行される」「列幅が不自然に広がる」「レイアウトが崩れる」といった問題が発生することがあります。表は情報密度が高くなりやすいため、文字の改行ルールを適切に制御しないと、可読性やUIの安定性が大きく損なわれます。本記事では、表内で改行されない文字をどのように制御すべきかを、CSSの挙動と実務視点から解説します。
表内で改行が発生する仕組み
テーブルセル内のテキストは、通常のインラインテキストと同様に、ブラウザの改行ルールに従って表示されます。スペースや改行可能な文字が存在する場合、セル幅に応じて自動的に折り返されます。一方で、改行できない文字列が含まれている場合は、列幅がその文字列に引っ張られ、テーブル全体が崩れる原因になります。
white-spaceで改行を禁止する
最も基本的な方法は、white-space プロパティを使って改行ルールを制御することです。white-space: nowrap を指定すると、セル内の文字は一切改行されなくなります。
td.nowrap {
white-space: nowrap;
}
この指定は、日付、数値、短いコードなど、必ず1行で表示したい情報に適しています。ただし、長い文字列がある場合は横スクロールやはみ出しを引き起こす可能性があります。
text-overflowと組み合わせた安全な制御
改行を禁止したうえで、表示領域からはみ出す文字を省略したい場合は、text-overflow を併用します。このとき、overflow と white-space の指定がセットで必要になります。
td.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
この構成により、セル幅を維持したまま、収まりきらない文字列を「…」で省略表示できます。管理画面や一覧表では非常によく使われるパターンです。
単語単位での折り返しを制御する
すべてを nowrap にするのではなく、「単語単位では折り返したいが、文字途中では改行したくない」というケースもあります。その場合は、word-break や overflow-wrap を使って制御します。
td {
word-break: normal;
overflow-wrap: break-word;
}
この指定では、長い単語やURLのみが必要に応じて折り返され、通常の文章は自然な改行が保たれます。
英数字やコードが改行されない原因
英数字や記号のみで構成された文字列は、ブラウザにとって「途中で改行できない単位」として扱われることがあります。この場合、white-space を指定していなくても列幅が引き伸ばされることがあります。URL、ハッシュ値、IDなどが典型例です。
code要素を含む場合の注意点
td 内に code 要素を配置している場合、等幅フォントと white-space の既定値によって、想定外に改行されないことがあります。code 要素単体に対して改行ルールを上書きすることで、挙動を安定させられます。
td code {
white-space: nowrap;
}
table-layoutとの関係
table-layout: auto の場合、セル内容が列幅計算に強く影響するため、改行されない文字があるとテーブル全体が広がります。table-layout: fixed を使うと、列幅が先に確定するため、改行制御や省略表示が効きやすくなります。
table {
table-layout: fixed;
width: 100%;
}
実務では、改行制御を行うテーブルでは fixed を選ぶほうが安定します。
レスポンシブ環境での考え方
スマートフォンなど画面幅が狭い環境では、完全に改行を禁止すると可読性が著しく低下します。そのため、デスクトップでは nowrap、モバイルでは折り返しを許可する、といった切り替えが有効です。
@media (max-width: 600px) {
td.nowrap {
white-space: normal;
}
}
実務での設計指針
表内の文字制御では、「どの情報を1行で見せる必要があるか」を最初に定義することが重要です。すべてを nowrap にするのではなく、列ごとに役割を分け、必要な箇所だけを制御することで、見やすさと柔軟性を両立できます。
まとめ
表内で改行されない文字を制御するには、white-space、text-overflow、word-break といったCSSプロパティの役割を正しく理解することが不可欠です。さらに、table-layout やレスポンシブ対応も含めて設計することで、レイアウト崩れを防ぎながら可読性の高いテーブルを実現できます。場当たり的な指定ではなく、情報の性質に応じた改行ルールを設計することが、実務で破綻しない表レイアウトにつながります。
