overflow-wrap、word-wrap : 長い単語間の改行禁止 CSSプロパティ
このページで解説するコードの実行結果。
overflow-wrap: normal;Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
overflow-wrap: break-word;Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
overflow: hidden;overflow: scroll;Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。
overflow-wrapの概要
長い単語間の改行禁止を設定する。（← デフォルトでは改行されるので、このプロパティは禁止する以外の使いようがない）
| 設定値 | 改行 |
|---|---|
normal | 禁止 |
break-word | 自動 |
anywhere | 自動 |
（メモ）公式にはデフォルト値はnormalになっているが、主要なブラウザの挙動は異なる。
まず、overflow-wrapの設定が無い場合の結果。
<p class="sample" lang="de"> Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft. </p> <p class="sample" lang="ja"> ドナウ汽船電気事業本工場工事部門下級官吏組合。 </p>
Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
normal
自動改行されない。
.sample { overflow-wrap: normal; }
Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
break-word
自動改行される。
.sample { overflow-wrap: break-word; }
Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
anywhere
.sample { overflow-wrap: anywhere; }
Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
併用するCSSプロパティ
overflowプロパティ
overflow-wrap: normal;に設定すると、親要素からあふれ出る。
.sample { overflow-wrap: normal; }
Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
その場合、overflowプロパティを設定した方が良い。
hidden
hiddenにすると、あふれた部分が見えなくなる。
.sample { overflow-wrap: normal; overflow: hidden; }
scroll
scrollにするとスクロールできるようになる。
.sample { overflow-wrap: normal; overflow: scroll; }
Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
詳細はoverflowプロパティを参照。
（参考）その他の方法
方法１ : ソフト・ハイフン「­」を使う
­を入れると、そこでの改行が優先される。ただし、日本語には効果は無いようだ。
<p class="sample" lang="de"> Donaudampfschiffahrtselektrizitäten­hauptbetriebswerk­bauunterbeamten­gesellschaft. </p> <p class="sample" lang="ja"> ドナウ汽船電気事業本工場­工事部門下級官吏組合。 </p>
Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
詳細は「hyphens : 単語の途中のハイフン」を参照。
方法２ : white-space: nowrap;を適用する
文字列間で改行を禁止のクラスnowrapを作って、改行したくない文字列に適用しても同じようにできる。
.nowrap { white-space: 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
.sample { word-wrap: normal; }
Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。
break-word
.sample { word-wrap: break-word; }
Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft.
ドナウ汽船電気事業本工場工事部門下級官吏組合。