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>
表示
pneumono­ultramicroscopicsilicovolcanoconiosis
pneumono­ultramicroscopicsilicovolcanoconiosis
pneumono­ultramicroscopicsilicovolcanoconiosis

関連項目

hyphenate-character, overflow-wrap, word-break

リンク

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