HTML & CSS

リファレンス

CSS

ワード ブレイク

word-breakプロパティ

CJK (中国語、日本語、韓国語)における、文章の改行方法を指定するプロパティです。

  • 初期値

    normal

  • 継承

    継承あり

  • 適用できる要素

    全要素

次のような値を設定することができます。

  • normal – 標準(ブラウザに準拠)の改行ルールを適用します。
  • break-all – 単語の途中でも改行を許可します。
  • keep-all – 単語の途中での改行を禁止します。CJK以外のテキストにおいては、normalと同じ標準のルールを適用します。

パターン1

ここで指定した改行方法によって、テキストの改行位置が調整されます。青い枠線がテキスト本来の幅となります。

CSSコード例

.sample_css1 .text1 {
	word-break: normal;
}
.sample_css1 .text2 {
	word-break: break-all;
}
.sample_css1 .text3 {
	word-break: keep-all;
}

normalの表示例:

日本語の改行についてのルールを指定します。こちらはその表示例です。改行の調整が異なります。

break-allの表示例:

日本語の改行についてのルールを指定します。こちらはその表示例です。改行の調整が異なります。

keep-allの表示例:

日本語の改行についてのルールを指定します。こちらはその表示例です。改行の調整が異なります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。