CSS Word-Break Enhancing Text Wrapping for Better Readability

Introduction

The word-break CSS property helps control how text breaks at the end of a line. By default, text breaks at spaces or hyphens, but word-break gives you more control, especially for handling long words or complex languages like Chinese, Japanese, and Korean (CJK).

Specification

The word-break property is defined in the CSS Text Module Level 3 specification.

Values

Here are the main values for word-break:

normal

• Default behavior: breaks at spaces or hyphens.

break-all

• Breaks between any two characters (except CJK text) to prevent overflow.

keep-all

• Prevents breaks in CJK text; non-CJK text behaves normally.

break-word

• Similar to overflow-wrap: anywhere combined with word-break: normal, ensuring words break at appropriate points.

Global Values

• inherit: Inherits the value from the parent element.
• initial: Sets the property to its default value.
• revert: Resets the property to the browser’s default.
• revert-layer: Resets the property to the value established by the user-agent stylesheet.
• unset: Resets the property to its inherited value if it inherits, otherwise to its initial value.

Formal Definition

The word-break property specifies how text should break at the end of a line. It’s crucial for managing text overflow and ensuring readability.

Initial Value:

• normal

Applies To:

• All elements

Inherited:

• Yes

Computed Value:

• As specified

Animation Type:

• Discrete

Formal Syntax

The formal syntax for the word-break property is:

word-break: normal | break-all | keep-all | break-word | initial | inherit;

Browser Compatibility

The word-break property is widely supported across modern browsers:

• Google Chrome: Since version 4.0 (January 2010)
• Mozilla Firefox: Since version 15.0 (August 2012)
• Microsoft Edge: Since version 12 (July 2015)
• Microsoft Internet Explorer: Since version 5.5 (July 2000)
• Opera: Since version 15.0 (May 2013)
• Safari: Since version 3.1 (March 2008)

For the latest details, check [Browser Compatibility Data]WebsiteUrl.

Using the word-break property effectively ensures your web designs are functional and look great across different browsers and devices.