⌘K

word-break プロパティ

word-break プロパティは、コンテナの幅に収まらない場合に、長い単語の文字を新しい行に折り返すことを可能にします。

構文

cssセレクタ {
  word-break: break-all | keep-all | normal;
}

値

値 説明
break-all 単語がコンテナに収まらない場合、長い単語を新しい行に折り返すことを強制します。
keep-all 表意文字（例：漢字）の改行用。
normal 標準の動作：長い単語がコンテナの幅に収まらない場合、単純にその境界をはみ出します（ただし、新しい行から始まります）。

デフォルト値：normal。

例 . normal 値

この例では、非常に長い単語はコンテナに収まらず、その境界をはみ出します（ただし新しい行から始まります）： 

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>
css#elem {
  width: 200px;
  word-break: normal;
  border: 1px solid red;
}

Результат:

例 . break-all 値

今度は、収まらなかった文字が単純に次の行に折り返されます： 

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>
css#elem {
  width: 200px;
  word-break: break-all;
  border: 1px solid red;
}

Результат:

関連項目

  • 長い単語の文字を新しい行に折り返すことも可能にするプロパティ overflow-wrap,
  • 単語の音節でのハイフネーション（改行）を有効にするプロパティ hyphens,
  • ブロックの境界をはみ出した部分を切り取るプロパティ overflow,
  • HTML の機能でソフトな改行を実装するタグ wbr,
  • テキストを強制的に新しい行に折り返すために使用できるタグ br,
Backwhite-spaceプロパティNextoverflow-wrapプロパティ