CSS line-break Property

❮ Prev Next ❯

The line-break property specifies how to break lines of Chinese, Japanese, or Korean text working with punctuation and symbols. But, these languages have different rules. This line break might not occur. For example, if the value is set to "strict", break before hyphens are not allowed in Chinese and Japanese languages.

The CSS specification emphasizes rules only for Chinese, Japanese and Korean.

For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox, -o- for older versions of Opera are used with this property.

The line-break is deprecated, use the word-break property instead.

Initial Value	auto
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.lineBreak = "loose";

Syntax

line-break: auto | loose | normal | strict | initial | inherit;

Example of the line-break property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .korean {
        line-break: strict;
      }
    </style>
  </head>
  <body>
    <h2>Line-break property example</h2>
    <!--Be the change you want to see in the world.-->
    <span class="korean">세상에서 보고싶은 변화가 있다면 당신 스스로 그 변화가 되어라.</span>
  </body>
</html>

Try it Yourself »

Result

Example of the line-break property with the "normal" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 16px;
        line-height: 24px;
        line-break: normal;
      }
    </style>
  </head>
  <body>
    <h2>Line-break property example</h2>
    <p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Values

Value	Description
auto	Breaks the text using the default line break rule which is decided by the browser. Each browser has a default rule for showing the line breaks. `auto` is the default value of this property.
normal	Breaks the text using the least restrictive line break rule: such as in newspapers.
loose	Breaks the text using the most common line break rule.
strict	Breaks the text using the most stringent line break rule.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.