CSS - hyphenate-character

概要

属性名 hyphenate-character
値 auto | <string>
初期値auto
適用可能要素テキスト
継承する
サポートhttps://caniuse.com/?search=hyphenate-character

説明

hyphens でハイフネーションを行う際、改行前の末尾に付加する文字を指定します。現時点(2022年7月)ではまだ Chrome, Edge, Safari, Opera ではベンダープレフィックス -webkit- が必要です。

値説明
auto言語情報に基づき自動的に設定されます。
<string>ハイフネーションに使用する文字を指定します。

使用例

CSS
.box {
  width: 8rem;
  border: 1px solid #999;
  padding: .2rem;
  margin-bottom: .5rem;
  hyphens: auto;
}
.asterisk {
  -webkit-hyphenate-character: "*";
  hyphenate-character: '*';
}
HTML
<div lang="en" class="box">pneumonoultramicroscopicsilicovolcanoconiosis</div>
<div lang="en" class="box asterisk">pneumonoultramicroscopicsilicovolcanoconiosis</div>
表示
pneumonoultramicroscopicsilicovolcanoconiosis
pneumonoultramicroscopicsilicovolcanoconiosis

関連項目

hyphens

リンク

Copyright (C) 2022 杜甫々
初版：2022年7月31日、最終更新：2022年7月31日
https://www.tohoho-web.com/css/prop/hyphenate-character.htm