CSS line-break Property
Description
The line-break
CSS property is used to control how text within an element should break and wrap when it encounters line-breaking opportunities, such as spaces or hyphens. It can be set to various values, with the two primary options being "normal" and "strict." When set to "normal," text is allowed to break and wrap at standard line-breaking points, optimizing for legibility. Conversely, when set to "strict," text is prevented from breaking in the middle of words or characters, ensuring that words remain intact but potentially leading to longer lines. This property is particularly useful when dealing with languages that have complex scripts or for precise control over text wrapping behavior in web design.
- Initial value
- auto
- Applies to
- All elements
- Inherited
- Yes
- Computed value
- Specified value
- Animatable
- No
- JavaScript syntax
- object.style.lineBreak
Interactive Demo
この喫茶店は、いつでもコーヒーの香りを漂わせています。
彼女はこの喫茶店で働いて、着々と実力をつけていきました。
今では知る人ぞ知る、名人です。
Syntax
line-break: auto | loose | normal | strict
Values
- autoThe browser determines the set of line-breaking restrictions to use, and it may vary the restrictions based on the length of the line; e.g., use a less restrictive set of line-break rules for short lines.
- looseBreaks text using the least restrictive set of line-breaking rules. Typically used for short lines, such as in newspapers.
- normalBreaks text using the most common set of line-breaking rules.
- strictBreaks text using the most stringent set of line-breaking rules.
Example
<div lang="ja">
<p class="wrapbox auto">
auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrapbox loose">
loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrapbox normal">
normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrapbox strict">
strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrapbox anywhere">
anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
</div>
.wrapbox {
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;
}
Browser Support
The following table will show you the current browser support for the CSS line-break
property.
Desktop | |||||
14 | 58 | 69 | 45 | 11 |
Tablets / Mobile | |||||
58 | 79 | 43 | 11 | 7 | 58 |
Last updated by CSSPortal on: 2nd January 2024