これらの言葉は表示範囲に合わせて文字が折り返されます。英語は、単語途中での改行は行いません。従って、長い英語の単語の途中では改行が行われないのです。break-all文字の折り返しで、「word-break」を使う場合、代表的な値が「break-all」です。この値の特徴は、「禁則処理の解除」です。日本語、英語に限らず、すべての言語は範囲に合わせて単語の途中で折り返されます。分かるように、英語などにこれを使う場合は注意してください。閲覧者にとって必ずしも見やすいサイトにはならないからです。break-word;」です。break-all;}keep-all「禁則処理」を忠実に守るのがこの値の特徴です。お分かりのように、日本語の場合でも「、」「。」は行の頭に来ることはありません。それどころか、これが改行のポイントとなっています。日本語の場合は、「、」「。」などの文章の節目で改行されています。切れ目で文字が折り返されるのです。英語は、単語途中での改行は行いません。従って、長い英語の単語の途中でも改行が行われていません。overflow-wrap(word-wrap)の特徴このプロパティの特徴は、「できるだけ禁則処理を維持する」という点、そして、単語が幅に達した時に、幅から超える場合のみに改行を行う点、です。これは、日本語というよりも、英語などのアルファベット言語に違いが生まれるため、日本語で試した場合はその違いがわかりません。CSS3仕様案では「word-wrap」から「overflow-wrap」へと名前が変わりました。ExplorerやFirefoxでは「overflow-wrap」のサポートが遅れているところもあるため、「overflow-wrap」を用いる場合は、念のため「word-wrap」も一緒に記載しておいたほうがよいでしょう。break-word;}normal「normal」を設定した場合は「word-break:normal;」と見え方は変わりません。これを設定する機会は少ないでしょう。単語の途中であっても表示範囲に合わせて文字が折り返されます。英語は、単語途中での改行は行いません。従って、長い英語の単語の途中では改行が行われないのです。break-wordこの特徴は、「可能な限り禁則処理が保持される」ということです。禁則処理が守られるため、日本語の場合、句読点が行頭に来ることや、英語も単語が途中で切れることはありませんし、もちろん、英語の場合もそうです。単語の長さが幅の長さを超えるような場合は改行を行います。単語の途中であっても表示範囲に合わせて文字が折り返されます。英語は、基本、単語途中での改行は行わず、区切りの良い単語で改行しますが、単語の長さが幅を超える場合は改行を行います。「word-wrap:break-word」が効かない?さて、次に、「word-wrap:break-word」が効かないケースへどう対応するべきかについて説明します。table内に文章を配置した場合にこの問題に直面します。次のtableを確認してみましょう。<td>方針は日本語要件を列挙でき原則ないますため、侵害しれ記事に漏洩者可能の著作技術を定めるれてはさませ、対象の事典は、著作生じる作品を違反いいことに対し一見必要あるあるていません。目的の理解版は、記事の掲載扱う引用自由ない記事に著作さ、その方針でさてCommonsを著作得ることに一見するられます。引用コモンズが達成しればい本が仮にするすることは、批判ですます、場合によっては調査者の引用として文章上の問題はしことを、被許諾物は、十分の承諾を得て下を引用しあるてなりなで。</tbody></table>これには、以下のCSSが設定されています。solid;}以下のように表示されていますね。最後の長い英単語があるせいで、文字は折り返されていません。これに対して、文字の折り返しを行いましょう。break-all;」を設定する方法もありますが、これだと英単語の途中でも折り返されるため、「word-wrap:break-word」を使ってみましょう。break-word;}結果は、先ほどと同じです。「word-wrap:break-word」が効いていません。このような問題がtableでは起こるのです。fixed;」を設定し、横幅を固定する必要があります。break-word;}すると、幅に応じて折り返しが行われました。tableの場合は、幅の指定と固定とセットで機能する場合があるということは覚えておいてください。まとめこの文字の折り返しのプロパティは、親要素に設定すれば、子要素、孫要素にも継承されていくものです。そこで、一般的には、bodyなどの要素に指定すれば、以下の構造にも反映されます。overflow-wrap(word-wrap)プロパティは、。禁則処理が守られるため、サイトのデザインを考えるときには、積極的に使用すると良いでしょう。おすすめ記事【無料あり】本気でおすすめしたいプログラミングスクール3つ【実際に受講した】おすすめ記事IT業界に強い転職サイト・転職エージェントのオススメはココ!【比較ランキング】この記事が気に入ったらいいねしよう!最新記事をお届けします。陽介ベトナムで起業し、HR関連のコンサルティング業務をやっています。日本を離れて8年が経ちますが、日本ではあり得ないハプニングを楽しんでいます。RailsでWebサービスを作っています。