CSS word-break Property

The word-break property sets how words break at the end of a line.

By default, a line of text only breaks at a space or a hyphen position.

To insert hyphens (-) at the end of a break, add the hyphens property.

Example

#

A narrow container with word-break set to break-all
This setting breaks words at any position before it overflows.

This verylongtext will be broken.

<style>
  .word-break {
    width: 100px;
    padding: 15px;
    border: 1px solid orangered;
    word-break: break-all;
  }
</style>

<p class="word-break">This verylongtext will be broken.</p>

Syntax

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

Values

#

Value Description
normal Default. Uses default line break rules.
break-all Words don't wrap and are broken at any character when they reach the end of the line.
keep-all For Chinese, Japanese, and Korean text words are not broken.
For other languages this is the same as normal.
break-word Words wrap and may be broken at arbitrary points, if necessary.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different word-break values.

This verylongtext will be broken.

<style>
  .word-break-example {
    width: 100px;
    padding: 15px;
    border: 1px solid orangered;
    word-break: normal;
  }
</style>

<p class="word-break-example">
  This verylongtext will be broken.
</p>

Browser support

This table shows when word-break support started for each browser.

Chrome
4.0 Jan 2010
Firefox
15.0 Aug 2012
IE/Edge
5.5 Jul 2000
Opera
15.0 May 2013
Safari
3.1 Mar 2008

You may also like

Guides