このページはコミュニティーの尽力で英語から翻訳されました。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 #999; 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 |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
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 |