hyphenate-character

Baseline 2023

Newly available

Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

hyphenate-character は CSS のプロパティで、ハイフンによる改行の前で行末に使用される文字（または文字列）を設定します。

自動ハイフネーション、ソフトハイフネーションのどちらでも、指定された hyphenate-character の値に従って表示されます。

試してみましょう

hyphenate-character: auto;

hyphenate-character: "=";

hyphenate-character: "—";

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

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

構文

css

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

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

値

<string>: <string> で、ハイフンによる改行の前で行末に使用されるものを表します。使用される文字が長すぎる場合は、ユーザーエージェントが切り落とすことがあります。
auto: ユーザーエージェントは、内容の言語における書体の規則に基づいて適切な文字列を選択します。これは既定のプロパティ値であり、明示的に指定する必要があるのは、異なる継承値を上書きする場合のみです。

公式定義

初期値	`auto`
適用対象	すべての要素
継承	あり
計算値	指定通り
アニメーションの種類	離散値

形式文法

hyphenate-character = 
  auto      |
  <string>

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

HTML

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

css

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

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

結果

仕様書

Specification
CSS Text Module Level 4 # propdef-hyphenate-character