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-characterCSS のプロパティで、ハイフンによる改行の前で行末に使用される文字(または文字列)を設定します。

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

試してみましょう

構文

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

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

<string>

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

auto

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

公式定義

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

形式文法

hyphenate-character = 
auto |
<string>

この例では、 2 つの同じテキストブロックに hyphens を設定して、必要な場所で確実に改行し、(&shy;を使って作成した)ソフトハイフンで改行するようにしています。 最初のブロックは、ハイフンの値が等号("*")に変更されています。 これは、このプロパティに対応しているユーザーエージェントでは 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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
hyphenate-character
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報