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:

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!