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の仕様で改行されないタグがあります。
以下記事を参考にしてください。
レスポンシブ対応する場合、スマホ時に改行がされてないと崩れる場合が多いです。
本記事を参考に調整してみてください。
以上で解説を終わります。
目次