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

リンク

初版：2022年7月31日、最終更新：2022年7月31日

https://www.tohoho-web.com/css/prop/hyphenate-character.htm

CSS - hyphenate-character

概要

説明

使用例

関連項目

リンク