CSS - hyphens

概要

属性名	hyphens
値	none \| manual \| auto
初期値	manual
適用可能要素	テキスト
継承	する
サポート	https://caniuse.com/?search=hyphens

説明

長い単語に対するハイフネーションのふるまいを指定します。ハイフネーションが行われると、横幅を超える様な長い単語の途中で改行が行われ、改行前の末尾にハイフン文字が挿入されます。挿入する文字は hyphenate-character で変更することができます。類似の属性に overflow-wrap, word-break があります。それぞれの差異は overflow-wrap を参照してください。

値	説明
none	ハイフネーションを行いません。ソフトハイフン文字()も無視します。
manual	ソフトハイフン文字()が指定された箇所のみでハイフネーションします。
auto	辞書情報により自動的にハイフネーションします。英語の場合 lang="en" を指定しておく必要があります。

使用例

CSS

.box {
  width: 8rem;
  border: 1px solid #999;
  padding: .2rem;
  margin-bottom: .5rem;
}
.hyphens-none {
  hyphens: none;
}
.hyphens-manual {
  hyphens: manual;
}
.hyphens-auto {
  hyphens: auto;
}

HTML

<div lang="en" class="box hyphens-none">pneumono&shy;ultramicroscopicsilicovolcanoconiosis</div>
<div lang="en" class="box hyphens-manual">pneumono&shy;ultramicroscopicsilicovolcanoconiosis</div>
<div lang="en" class="box hyphens-auto">pneumono&shy;ultramicroscopicsilicovolcanoconiosis</div>

表示

pneumonoultramicroscopicsilicovolcanoconiosis

リンク

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

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

CSS - hyphens

概要

説明

使用例

関連項目

リンク