2018年12月26日(水)

【CSS】 テキストを折り返す方法！自動で改行・レスポンシブにも対応

• 0
• 56
• 23
• 82

「テキストが中途半端なところで折り返される」
「英語や文字がはみ出てしまう」

こんな悩みを持ったことはありませんか？

小さなことですが、サイトの印象に関わる深刻な悩みの一つです。

例えば、見出しに英語が含まれていて、それが単語の途中で折り返されたら、非常に読みづらいと思いませんか？

ここで使うのが、文字の折り返しを制御するCSSです。

これは知っているかどうかだけなのですが、癖があるCSSプロパティで、よくわからないという声も聞きます。

安心してください。

この記事では、よく使われる2種類の文字の折り返しプロパティ(「word-break」と「overflow-wrap」)を丁寧に解説しています。

CSSを学習し始めた人には理解に時間がかかるプロパティですが、頑張って習得しましょう。

経験者向けではありませんので、経験者は必要に応じて読み飛ばしてください。

参考：【初心者向け】CSS(スタイルシート)の書き方を丁寧に解説

なぜCSSの文字の折り返しを複数覚えなければならないの？

文字の折り返しは、ブロック要素内では自動的に起こります(自動改行)。

それなのになぜ敢...