hyphenate-character

試してみましょう

hyphenate-character: auto;

hyphenate-character: "=";

hyphenate-character: "—";

<section id="default-example">
  <p id="example-element">An extra­ordinarily long English word!</p>
</section>

#example-element {
  border: 2px dashed #999999;
  font-size: 1.5rem;
  text-align: left;
  width: 7rem;
  hyphens: auto;
}

構文

hyphenate-character: <string>;
hyphenate-character: auto;

この値は、ハイフンの代わりに使用する文字列を設定するか、またはユーザーエージェントが現在の書体の慣習に基づいて適切な文字列を選択することを示します（既定値）。

値

<string>

<string> で、ハイフンによる改行の前で行末に使用されるものを表します。 使用される文字が長すぎる場合は、ユーザーエージェントが切り落とすことがあります。

auto

ユーザーエージェントは、内容の言語における書体の規則に基づいて適切な文字列を選択します。 これは既定のプロパティ値であり、明示的に指定する必要があるのは、異なる継承値を上書きする場合のみです。

公式定義

形式文法

hyphenate-character = 
  auto      |
  <string>  

例

この例では、 2 つの同じテキストブロックに hyphens を設定して、必要な場所で確実に改行し、（­を使って作成した）ソフトハイフンで改行するようにしています。 最初のブロックは、ハイフンの値が等号 (=) に変更されています。 2 番目のブロックにはハイフネーション文字セットが設定されていません。これは、このプロパティをサポートするユーザーエージェントでは、 hyphenate-character: auto と同等です。

HTML

<dl>
  <dt><code>hyphenate-character: "="</code></dt>
  <dd id="string" lang="en">Superc&shy;alifragilisticexpialidocious</dd>
  <dt><code>hyphenate-character の設定なし</code></dt>
  <dd lang="en">Superc&shy;alifragilisticexpialidocious</dd>
</dl>

CSS

dd {
  width: 90px;
  border: 1px solid black;
  hyphens: auto;
}

dd#string {
  -webkit-hyphenate-character: "=";
  hyphenate-character: "=";
}

結果

仕様書

ブラウザーの互換性

関連情報

• 関連する CSS プロパティ: hyphens, overflow-wrap