CSS - line-break

概要

属性名 line-break
値 auto | loose | normal | strict | anywhere
初期値auto
適用可能要素すべての要素
継承継承する
サポートhttps://caniuse.com/?search=line-break

説明

日本語、韓国語、中国語などの自動改行時の禁則処理を指定します。対象要素には lang="ja" を設定します。

値説明
anywhereすべての文字を禁則処理しません。
loose最低限の禁則処理を行います。「。」や「、」など。
normal最低限に加えて通常の禁則処理を行います。「々」など。
strict通常に加えて厳密な禁則処理を行います。「っ」や「ゃ」など。
auto自動的に禁則処理を決定します。行の長さによって禁則条件が変動することもあります。

使用例

使用例を示します。赤枠の横幅を変更して「。」「っ」「々」が禁則処理されるか試してみてください。

CSS
.sample-box {
  width: 20rem;
  border: 1px solid #900;
  overflow: auto;
  resize: horizontal;
  padding: 1rem;
}
.box {
  height: 4rem;
  border: 1px solid gray;
  padding: .2rem;
}
.sample-anywhere {
  line-break: anywhere;
}
.sample-loose {
  line-break: loose;
}
.sample-normal {
  line-break: normal;
}
.sample-auto {
  line-break: auto;
}
.sample-strict {
  line-break: strict;
}
HTML
<div class="sample-box" lang="ja">
  <h5>anywhere</h5>
  <div class="box sample-anywhere">日本語がどこで改行されるか。昔々のあっぱれ物語。</div>
  <h5>loose</h5>
  <div class="box sample-loose">日本語がどこで改行されるか。昔々のあっぱれ物語。</div>
  <h5>normal</h5>
  <div class="box sample-normal">日本語がどこで改行されるか。昔々のあっぱれ物語。</div>
  <h5>auto</h5>
  <div class="box sample-auto">日本語がどこで改行されるか。昔々のあっぱれ物語。</div>
  <h5>strict</h5>
  <div class="box sample-strict">日本語がどこで改行されるか。昔々のあっぱれ物語。</div>
</div>
表示

anywhere

日本語がどこで改行されるか。昔々のあっぱれ物語。

loose

日本語がどこで改行されるか。昔々のあっぱれ物語。

normal

日本語がどこで改行されるか。昔々のあっぱれ物語。

auto

日本語がどこで改行されるか。昔々のあっぱれ物語。

strict

日本語がどこで改行されるか。昔々のあっぱれ物語。

リンク

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