CSS word-break

The CSS word-break property is used to define whether the word should break or not, and in what way the word should break, when overflow the container. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{width: 60px; border: 1px solid red;}
      .a{word-break: normal;}
      .b{word-break: break-word;}
      .c{word-break: break-all;}
      .d{word-break: keep-all;}
   </style>
</head>
<body>
   
   <h2>word-break: normal</h2>
   <p class="a">trustworthiness is the ability to be relied on as honest</p>

   <h2>word-break: break-word</h2>
   <p class="b">trustworthiness is the ability to be relied on as honest</p>

   <h2>word-break: break-all</h2>
   <p class="c">trustworthiness is the ability to be relied on as honest</p>

   <h2>word-break: keep-all</h2>
   <p class="d">trustworthiness is the ability to be relied on as honest</p>

</body>
</html>

Output

word-break: normal

trustworthiness is the ability to be relied on as honest

word-break: break-word

trustworthiness is the ability to be relied on as honest

word-break: break-all

trustworthiness is the ability to be relied on as honest

word-break: keep-all

trustworthiness is the ability to be relied on as honest

CSS word-break Syntax

The syntax of word-break property in CSS, is:

word-break: x;

The value of x should be any of the following:

normal - used to apply the default version of line break. This is the default value
break-word - used to break the long word
break-all - used to break all the words that are going to overflow the container
keep-all - used not to break word for Chinese, Japanese, and Korean text. Rest text behavior will be same to normal
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »