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

overflow-wrap: normal;

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

overflow-wrap: break-word;

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

overflow: hidden;
overflow: scroll;

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

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

CSS : デフォルトCSS
p {  
    border:         solid blue;   /*  境界線  */
    margin:         8px;          /*  外側の余白  */
    margin-right:   5em;          /*  右マージン */
    max-width:      15em;         /*  最大幅  */
    color:          red;          /*  文字の色 */
    background-color:   #fef;     /*  背景色 */
    font-size:      1.2em;        /*  文字の大きさ */
}

overflow-wrapの概要

長い単語間の改行禁止を設定する。(← デフォルトでは改行されるので、このプロパティは禁止する以外の使いようがない)

(表) overflow-wrapの設定値
設定値改行
normal禁止
break-word自動
anywhere自動

(メモ)公式にはデフォルト値はnormalになっているが、主要なブラウザの挙動は異なる。

まず、overflow-wrapの設定が無い場合の結果。

HTML : 適用するHTML
<p class="sample" lang="de">
    Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
</p>
<p class="sample" lang="ja">
    ドナウ汽船電気事業本工場工事部門下級官吏組合。
</p>
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

normal

自動改行されない。

CSS : normal
.sample  {
    overflow-wrap:  normal;
}
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

break-word

自動改行される。

CSS : break-word
.sample  {
    overflow-wrap:  break-word;
}
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

anywhere

CSS : anywhere
.sample  {
    overflow-wrap:  anywhere;
}
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

併用するCSSプロパティ

overflowプロパティ

overflow-wrap: normal;に設定すると、親要素からあふれ出る。

CSS : normal
.sample  {
    overflow-wrap:  normal;
}
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

その場合、overflowプロパティを設定した方が良い。

hidden

hiddenにすると、あふれた部分が見えなくなる。

CSS : overflow:hidden
.sample  {
    overflow-wrap:  normal;
    overflow:       hidden;
}
実行結果

scroll

scrollにするとスクロールできるようになる。

CSS : overflow:scroll
.sample  {
    overflow-wrap:  normal;
    overflow:       scroll;
}
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

詳細はoverflowプロパティを参照。

(参考)その他の方法

方法1 : ソフト・ハイフン「&shy;」を使う

&shy;を入れると、そこでの改行が優先される。ただし、日本語には効果は無いようだ。

HTML : ソフト・ハイフンを入れる
<p class="sample" lang="de">
    Donaudampfschiffahrtselektrizitäten&shy;hauptbetriebswerk&shy;bauunterbeamten&shy;gesellschaft.
</p>
<p class="sample" lang="ja">
    ドナウ汽船電気事業本工場&shy;工事部門下級官吏組合。
</p>
実行結果

Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft.

ドナウ汽船電気事業本工場­工事部門下級官吏組合。

詳細は「hyphens : 単語の途中のハイフン」を参照。

方法2 : white-space: nowrap;を適用する

文字列間で改行を禁止のクラスnowrapを作って、改行したくない文字列に適用しても同じようにできる。

CSS : 改行禁止のnowrapクラス
.nowrap {
    white-space: nowrap;
}
HTML : nowrapクラスを適用
<p class="sample" lang="de">
    <span class="nowrap">Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.</span>
</p>
<p class="sample" lang="ja">
    <span class="nowrap">ドナウ汽船電気事業本工場工事部門下級官吏組合。</span>
</p>
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

HTMLコードに<span class="nowrap">要素を埋め込むため煩雑になるが、改行禁止を(親要素の中で)個別にしたい場合に有効である。

親要素の~設定
~全体で設定overflow-wrap: normal;
~中で個別に設定white-space: nowrap;

詳細は「white-space(nowrap) : 改行禁止」を参照。

word-wrap

overflow-wrapの古い名前。名前が無くなる可能性があるので、使わない方がよい。

一応、結果を表示しておく。

normal

CSS : normal
.sample  {
    word-wrap:  normal;
}
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。

break-word

CSS : break-word
.sample  {
    word-wrap:  break-word;
}
実行結果

Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.

ドナウ汽船電気事業本工場工事部門下級官吏組合。