hyphensプロパティ

hyphensプロパティは単語の途中で改行を許可するかを指定するプロパティです。

hyphensプロパティに指定できる値

hyphensプロパティには次の値を指定することができます。

値	内容
`none`	単語を改行で分割しない。
`manual`	単語の途中に改行用文字「`-`（半角ハイフン）」がある場合は改行を行う。無い場合は改行しない。
`auto`	単語の途中改行を行う。ブラウザによっては、改行を行った場所へ自動的に「`-`」が挿入される。

hyphensプロパティに「none」を指定すると、可能な限り単語の途中で改行をしないようにテキストを表示します。

.text1 {
  hyphens: none;
}

<p class="text1">The englishtext text is broken.</p>

値に「manual」を指定すると、単語の途中で「-(半角ハイフン)」がある場合はそこでテキストを改行するように表示します。
「-」がない場合は単語の途中でテキストが改行されないように表示します。

.text2_1,
.text2_2 {
  hyphens: manual;
}

<p class="text2_1">The englishtext text is broken.</p>
<p class="text2_2">The english-text text is broken.</p>

値に「auto」を指定すると、テキストが単語の途中で折り返す（改行する）場合に自動的に「-」を挿入して単語が次の行に続いていることを示します。

.text3 {
  hyphens: auto;
}

<p class="text3">The englishtext text is broken.</p>