Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS word-break

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides