Written by Kasumi

tableのtd・thタグ内テキストが改行されない原因と解決方法

tableのtd・thタグに入ってるテキストが折り返し(改行)されない。

折り返し・改行されるように調整したい。

本記事でこのような悩みを解決。

調整方法について解説します。

改行されない原因

原因としてはHTMLの仕様のようです。

tableのth・tdタグ内に長い英単語のテキストが入ってる場合に改行されません。

解決方法

  table th,
  table td {
    word-break: break-word;
  }

長い英単語も改行されるようにしたい場合、

word-break: break-word;

上記プロパティをCSSでtableのth・tdタグに与えればOKです。

以上で改行されるようになります。

まとめ

他にもhtmlの仕様で改行されないタグがあります。

以下記事を参考にしてください。

レスポンシブ対応する場合、スマホ時に改行がされてないと崩れる場合が多いです。

本記事を参考に調整してみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS

CSSでテキストを大文字・小文字に自動変換する方法

2022.08.04
248
HTMLCSS プログラミング

【簡単CSS】flexboxで孫要素の高さを揃えて均等に子要素を横並び配置する方法

2022.03.06
3079
HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
370
HTMLCSS プログラミング

【簡単CSS】ある要素位置までスクロールしたらその要素を固定する方法【JavaScript不要】

2022.03.27
1253