【HTML】Webページで改行コード(¥n)で改行したい！そんな時に役立つword-breakプロパティ！

はじめに

Webページで改行といえば
タグですが動的に生成された文書に改行を入れるのは難しいもの。
そんな時は、CSSのword-breakプロパティが便利です。今回はword-breakを使ってHTMLの改行を制御する方法を紹介します。

div {
    word-break: break-all;
}

このように指定した場合、単語が行の端に達した場合、単語を折り返して改行します。

div {
    word-break: keep-all;
}

このように指定した場合、日本語など(アジア言語)を含む文章では、単語の途中で折り返しを行わず、単語単位で改行します。

div {
    word-break: break-word;
}

このように指定した場合、単語の途中でも折り返しを行いますが、break-allよりも単語全体を重視します。

div {
    word-break: normal;
}

このように指定した場合、ブラウザが自動で適切な改行位置を決定します。