このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
line-break
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.
line-break はCSS のプロパティで、中国語、日本語、韓国語 (CJK) のテキストにおいて、句読点や記号を用いた場合の改行規則（禁則）を設定します。
試してみましょう
line-break: auto;line-break: anywhere;line-break: normal;line-break: loose;<section> <p> この喫茶店は、いつでもコーヒーの香りを漂わせています。<br />彼女はこの喫茶店で働いて、着々と実力をつけていきました。<br />今では知る人ぞ知る、名人です。 </p></section>#example-element { font-family: "Yu Gothic", "YuGothic", "Meiryo", "ＭＳ ゴシック", sans-serif; border: 2px dashed #999999; text-align: left; width: 240px; font-size: 16px;}構文
css
/* キーワード値 */line-break: auto;line-break: loose;line-break: normal;line-break: strict;line-break: anywhere;/* グローバル値 */line-break: inherit;line-break: initial;line-break: revert;line-break: revert-layer;line-break: unset;値
auto既定の改行規則を使用してテキストを改行します。
loose最も制限の少ない改行規則を使用してテキストを改行します。一般的に、新聞などの短い行に使用されます。
normal最も一般的な改行規則を使用してテキストを改行します。
strict最も厳格な改行規則を使用してテキストを改行します。
anywhere句読点や温存されたホワイトスペース、単語の途中も含め、すべての文字の間で折り返しできるようにし、 GL, WJ, ZWJ の文字クラスや、
word-breakプロパティでもたらされる折り返しの禁止を一切無視します。どの折り返しの機会も優先されることはありません。ハイフネーションは適用されません。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
line-break =
auto|
loose|
normal|
strict|
anywhere
例
テキストの折り返しの設定
"々"、"ぁ"、"。" の前で折り返しが行われるかどうかを確認してください。
HTML
html
<div lang="ja"> <p> auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。 </p> <p> loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。 </p> <p> normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。 </p> <p> strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。 </p> <p> anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。 </p></div>CSS
css
.wrap-box { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block;}.auto { line-break: auto;}.loose { line-break: loose;}.normal { line-break: normal;}.strict { line-break: strict;}.anywhere { line-break: anywhere;}結果
仕様書
| Specification |
|---|
| CSS Text Module Level 3 # line-break-property |