小さなことですが、サイトの印象に関わる深刻な悩みの一つです。ここで使うのが、文字の折り返しを制御するCSSです。これは知っているかどうかだけなのですが、癖があるCSSプロパティで、よくわからないという声も聞きます。ここでは、よく使われる2種類の文字の折り返しプロパティを解説しています。CSSを学習し始めた人には理解に時間がかかるプロパティなのですが、それぞれの特徴を説明します。経験者向けではありませんので、経験者は必要に応じて読み飛ばしてください。まとめなぜ文字の折り返し?まず、文字の折り返しは、ブロック要素内では自動的に起こります(自動改行)。これに関する複数のCSSプロパティの存在とその挙動の違いが、「文字の折り返し」一つをとっても理解を複雑にしているのです。シンプルに言えば、文字の折り返しにも幾つかのやり方があるからであり、あるいは、折り返しが起きない状況もあり、敢えて設定しなければ、その状況に対応できないからです。実は、ある程度CSSの学習を進めていくと似た機能をもつプロパティが出てきて、その違いに混乱してしまいます。場合は、ブラウザ間で違いが出ていたり、コントロールの範囲に違いがあります。今回は、一旦、以下の違いを理解しておきましょう。このプロパティは、コード中の半角スペース、タブの取り扱いなどを含めるかどうかの操作も制御の対象に含めます。複数行に渡る文章のスタイルをコントロールできるので、スペースも含めて、書いた文書をそのまま表示に反映させたい場合、あるいは、特定の文章は折り返したくない場合があればこちらを使うと良いでしょう。大雑把に言えば、スペースの反映の可否、文字の折り返しの可否も対象としたプロパティであるということです。これらのプロパティは、「white-space」よりも更に「文字の折り返し」に焦点を絞っています。大雑把に言えば、日本語(あるいは、韓国語、中国語)とアルファベット言語(英語、フランス語など)の折り返し、特に、単語に合わせるか、表示幅に合わせるか、などを制御します。文字の折り返しのCSSプロパティは、主に2種類あります。「word-break」と「overflow-wrap」の2つです。値が複数あり、その特徴を知らないと期待通りの挙動にはなりません。覚えるのが面倒という方は、「word-break:break-all;」と「overflow-wrap:break-word;」の2つの挙動の違いを理解してください。この2つが文字の折り返しを行うプロパティだからです。日本語の場合は幅に合わせて文字は折り返されます。英語なら単語(各アルファベットではないことに注意)ごとに折り返されます。これは非常に強力な値です。日本語であっても、英語であっても、幅に合わせて一切の単語が途中で折り返されます。英文は単語の途中でも折り返されるので読みづらくなるでしょう。日本語の場合も、英語の場合も単語の途中での折り返しはしません。日本語場合は、「、」や「。」で区切られる塊ごとに折り返されるため、余分なスペースが空いてしまいます。日本語の場合は幅に合わせて文字は折り返され、かつ、文字の途中で折り返されます。英語なら単語(各アルファベットではないことに注意)ごとに折り返されます。日本語の場合は幅に合わせて文字は折り返され、かつ、文字の途中で折り返されます。英語なら文章は、単語(各アルファベットではないことに注意)ごとに折り返されますし、長い単語はその途中で折り返されます。禁則処理とは?さて、上記の表を見た人の中には、「で、結局、word-breakとoverflow-wrapは何が違うの?」と思った人もいるかもしれません。これを理解するためにここで、「禁則処理」という言葉を理解しましょう。」「、」「...」「?」などの文字を行頭や行末に来ることを避ける処理のことです。これらの記号が文章の最初に来るのは格好が悪いですよね。それを防ぐ措置が禁則処理というものです。「word-break」と「overflow-wrap」の違いには、これが大きく関係しています。禁則処理を設定するか、しないかを強く意識したプロパティが「word-break」であり、「単語の折り返し」を強く意識したのが「overflow-wrap」です。後者は、日本語で違いを理解することは難しく、英語の文章と英語の長い単語(1ワード)で比べたほうが良いでしょう。3つのパターンで考えるでは、値の挙動を確認していきましょう。HTMLを以下のように設定します。一つ目は日本語の文章、二つ目は英語の文章、三つ目は長い英語単語です。この3つの例を出したのは、「word-break」と「overflow-wrap」の挙動がこの3つで変わるからです。英語の文章と単語の違いに注目してください。日本語の文章では違いはわかりづらいです。class="container"><p>方針は日本語要件を列挙でき原則ないますため、侵害しれ記事に漏洩者可能の著作技術を定めるれてはさませ、対象の事典は、著作生じる作品を違反いいことに対し一見必要あるあるていません。目的の理解版は、記事の掲載扱う引用自由ない記事に著作さ、その方針でさてCommonsを著作得ることに一見するられます。引用コモンズが達成しればい本が仮にするすることは、批判ですます、場合によっては調査者の引用として文章上の問題はしことを、被許諾物は、十分の承諾を得て下を引用しあるてなりなで。deseruntmollitanimidestlaborum.</p></div>word-breakの特徴word-breakを設定する前に、設定しなかったらどう見えるのかを見ておきましょう。#F5F6CE;}pタグはブロック要素を形成しますので、自動的に文字が折り返されます。何も指定しない場合は、日本語は、単語の途中で折り返され、英語は、単語ごとに折り返されます。長い英単語は、折り返されず、範囲を超えて表示されているのがわかります。ここから、それぞれのプロパティとそれが持つ値を設定していきましょう。