概要へ移動

このページで解説するコードの実行結果。

単語中でも改行される : break-all

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。現実にあわぬことはやらぬ。それだけだ。それをなぜ人は奇策家とみるのか、おれにはわからん」
～ 竜馬がゆく（司馬遼太郎）

日本語でも単語中の改行を避ける : keep-all

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。現実にあわぬことはやらぬ。それだけだ。それをなぜ人は奇策家とみるのか、おれにはわからん」
～ 竜馬がゆく（司馬遼太郎）

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
p {   

    border:         solid blue;   /*  境界線  */

    margin:         8px;          /*  外側の余白  */

    max-width:      15em;         /*  最大幅  */

    color:          red;          /*  文字の色 */

    font-size:      1.2em;        /*  文字の大きさ */

    display:        inline-block; /*  横並び  */

    vertical-align: top;          /*  上揃え  */

}

word-breakの概要

単語の途中の改行について設定する。

（表） word-breakの設定値
設定値英語などでの改行日本語などでの改行デフォルト
break-all○○
normal×○○
keep-all××

word-breakを指定してない結果。（normalを指定した場合と同じ）

HTML : 適用するHTML
<p class="sample" lang="en">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>



<p class="sample">

    「おれは奇策家ではない」<br>

    竜馬の本音だ。<br>

    「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。現実にあわぬことはやらぬ。それだけだ。それをなぜ人は奇策家とみるのか、おれにはわからん」<br>

    ～ 竜馬がゆく（司馬遼太郎） 

</p>
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。現実にあわぬことはやらぬ。それだけだ。それをなぜ人は奇策家とみるのか、おれにはわからん」
～ 竜馬がゆく（司馬遼太郎）

break-all

英語などの場合、単語の途中であっても文の最後に来た段階で改行されている。 単語が分断されており、このような設定は普通あり得ない。

CSS : break-all
.sample  {

    word-break:    break-all;

}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。現実にあわぬことはやらぬ。それだけだ。それをなぜ人は奇策家とみるのか、おれにはわからん」
～ 竜馬がゆく（司馬遼太郎）

normal

デフォルト値。英語などの場合、単語の途中で改行されないように自動的に調整されている。

CSS : normal
.sample  {

    word-break:    normal;

}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。現実にあわぬことはやらぬ。それだけだ。それをなぜ人は奇策家とみるのか、おれにはわからん」
～ 竜馬がゆく（司馬遼太郎）

keep-all

英語などはnormalと同じ。

日本語の場合、Chromeブラウザで見ると「。」の後ろで改行されるように調整されている。ただし、全てのブラウザでそのように見えるわけではない。

CSS : keep-all
.sample  {

    word-break:    keep-all;

}
実行結果

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

「おれは奇策家ではない」
竜馬の本音だ。
「おれは奇策家ではないぞ。おれは着実に物事を一つずつ築き上げてゆく。現実にあわぬことはやらぬ。それだけだ。それをなぜ人は奇策家とみるのか、おれにはわからん」
～ 竜馬がゆく（司馬遼太郎）

overflow-wrap

CSS : keep-all
.sample  {

    word-break:    keep-all;

}
HTML : とても長い単語
<p class="sample" lang="de">

    Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

</p>
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

上記のようなとても長い単語があり、親のブロック要素（青い線）に収まらないとする。

その場合、normalやkeep-allを設定していても、単語中で勝手に改行される。

この勝手な改行を禁止したい場合はoverflow-wrap | word-wrap : 長い単語間の改行禁止を参照。

Emmet : wob

記述Visual Studio Code
wobword-break: normal;
wobkword-break: keep-all;
wobbword-break: break-all;