line-break
The line-break CSS property specifies the strictness of line-breaking rules applied within an element: especially how wrapping interacts with punctuation and symbols.
CSS
JS
object.style.lineBreak = "value";
Values
<'line-break'> = auto | loose | normal | strict | anywhere
auto
Automatically specified by the user agent.
loose
Breaks text using the least restrictive set of line-breaking rules.
normal
Breaks text using the most common set of line-breaking rules.
strict
Breaks text using the most stringent set of line-breaking rules.
anywhere
There is a soft wrap opportunity around every typographic character unit, including around any punctuation character or preserved white spaces, or in the middle of words, disregarding any prohibition against line breaks, even those introduced by characters with the GL, WJ, or ZWJ character class or mandated by the word-break property. The different wrapping opportunities must not be prioritized. Hyphenation is not applied.
Initial
auto
loose
<!doctype html>
<html>
<head>
<style>
p {
line-break: loose;
}
</style>
</head>
<body>
<p>loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose loose</p>
</body>
</html>
normal
<!doctype html>
<html>
<head>
<style>
p {
line-break: normal;
}
</style>
</head>
<body>
<p>normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal normal</p>
</body>
</html>
strict
<!doctype html>
<html>
<head>
<style>
p {
line-break: strict;
}
</style>
</head>
<body>
<p>strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict strict</p>
</body>
</html>
anywhere
<!doctype html>
<html>
<head>
<style>
p {
line-break: anywhere;
}
</style>
</head>
<body>
<p>anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere</p>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.lineBreak = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="auto">
<input onmouseover="mouseover(value)" type="button" value="loose">
<input onmouseover="mouseover(value)" type="button" value="normal">
<input onmouseover="mouseover(value)" type="button" value="strict">
<input onmouseover="mouseover(value)" type="button" value="anywhere">
<p>line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break line-break</p>
</body>
</html>
Internal
External