CSS - word-break

• トップ
• CSSリファレンス
• word-break

概要

説明

和文や英文などの文字間、単語間、文節間、文章間で表示幅に合わせた自動改行を行うか否かを指定します。ここで和文等とは日本語、中国語、韓国語などのように単語の境界にスペース文字を用いない言語を指します。英文等とは英語やドイツ語などのように単語の境界にスペース文字を用いる言語を指します。文節は「風の/谷の/ナウシカ」などのように間に喋る際に間に少し間を開けても不自然ではない単位を指します。

長い英単語を単語の途中で改行する場合、改行位置にハイフン(-)を表示することができます。詳細は hyphens を参照してください。

使用例

.my-box {
  margin: 1em;
  border: 1px solid #ccc;
  width: 11rem;
}
.wb-normal      { word-break: normal; }
.wb-break-all   { word-break: break-all; }
.wb-break-word  { word-break: break-word; }
.wb-keep-all    { word-break: keep-all; }
.wb-auto-phrase { word-break: auto-phrase; }

<div class="my-box wb-xxxxxxxx">
  The most long word is pneumonoultramicroscopicsilicovolcanoconiosis.
  This is English sentence. This is English sentence.
  これは日本語の長い長い長い長い文章です。これは日本語の長い長い長い長い文章です。
</div>