はみ出した文字を収めてくれるCSS word-break

文字溢れを解消

今週からCSSの勉強をはじめたものの、いきなり壁にぶつかり右往左往。

ボックス指定したのに文字が、はみ出す、はみ出す。テキストを削ればどうにかるが、それをイチイチ調整するのは面倒。

ということで、ネットで調べたらありました!!

1初期ファイル

こんな感じ。いたってシンプル

word-break word-break

2.で、出来上がり

文字のはみ出しっぷりっといたら・・・ひどすぎです。

word-break

3コード追加

Word-break=break-all:を追加 word-break

4.出来上がり

見事ボックス内にテキストが収まりました。

css_09