CSS word-break 単語の改行方法を指定

word-breakプロパティ

word-break : 値

word-breakプロパティは、単語の改行方法を指定します。

説明
normal 言語のデフォルトの改行ルールを使用します。
日本語は単語の途中でも改行します。
英字は改行しません(初期値)。
break-all 日本語、英字ともに単語の途中でも改行します。
よく使用します。
keep-all 日本語、英字ともに単語の途中で改行しません。
値を継承する

単語の改行方法を指定するサンプルです。

日本語は単語の途中でも改行する (normal)

<style>
  #p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    word-break: normal;
  }
</style>
<p id="p1">normal日本語は単語の途中でも改行します</p>

値がnormalで日本語の場合、単語の途中で改行します。

 

英字は単語の途中でも改行しない (normal)

<style>
  #p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    word-break: normal;
  }
</style>
<p id="p1">normaleigohakaigyoushimasen</p>

値がnormalで英字の場合、単語の途中で改行します。

 

日本語、英字ともに単語の途中でも改行する (break-all)

<style>
  #p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    word-break: break-all;
  }
</style>
<p id="p1">breakall単語の途中でも改行します</p>

break-allは、改行します。

 

日本語、英字ともに単語の途中で改行しない (keep-all)

<style>
  #p1 {
    border: 1px solid #000;
    width: 150px;
    height: 50px;
    background: LightCyan;
    word-break: keep-all;
  }
</style>
<p id="p1">keepall単語の途中で改行しません</p>

keep-allは、改行しません。

関連の記事

CSS overflow-wrap 単語が表示域を超える時の改行
CSS overflow はみ出た部分を表示する/しない

△上に戻る