CSS line-break

The line-break property specifies the strictness of line-breaking rules applied within an element.

In particular, line-break determines how content will wrap when it includes punctuation and symbols.

The strictness of line-breaking rules depends on the language being used. Different languages have different rules/conventions for where line breaks can occur. For example if the language is Chinese or Japanese, breaks before hyphens are allowed if line-break has a value of normal or loose mode, but not if its value is strict.

The CSS specification outlines rules for CJK (Chinese, Japanese, and Korean) text, but not for non-CJK text (although this could change in the future).

Syntax

Possible Values

auto

The browser/user agent determines where line-breaks can occur.

loose

Breaks text using the least restrictive set of line-breaking rules. This is useful for when the content area is particularly narrow, such as when displaying it within a multi-column layout.

normal

Breaks text using the most common set of line-breaking rules.

strict

Breaks text using the most stringent set of line-breaking rules.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial

Represents the value specified as the property's initial value.

inherit

Represents the computed value of the property on the element's parent.

unset

This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

CSS Specifications

• The line-break property is defined in CSS3 Text Module (W3C Candidate Recommendation 14 May 2003).
• The property is also included in CSS3 Text Module Level 3 (Editor's Draft at time of writing). This draft adds the auto and loose values to the property.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.