CSS - word-break Property

The word-break property in CSS is used to specify how words should be broken or wrapped in case they exceed the available width of an element. It determines if the browser should allow the words to break at any point or if they should be kept together.

Possible Values

  • normal: Uses default line break rule.

  • break-all: Word breaks to be applied, in order to prevent overflow.

  • keep-all: Word breaks not to be used for Chinese, Japanese and Korean; and for other languages, should be normal.

  • break-word: Same as anywhere, i.e. word break at any word is applied. But this value is deprecated.

Applies to

All the HTML elements.

DOM Syntax

object.style.wordBreak = "break-all";

Example

Here is an example:

<html>
<head>
<style>
   p {
      border: 2px solid green;
      width: 200px;
   }
   .normal {
      word-break: normal;
   }
   .all {
      word-break: break-all;
   }
   .keep {
      word-break: keep-all;
   }
   .wordbreak {
      word-break: break-word;
   }
</style>
</head>
<body>
   <h2>Word Break</h2>
   <p class="normal">normal - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
   <p class="all">break-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
   <p class="keep">keep-all - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
   <p class="wordbreak">break-word - CSS provides property <b>word-break</b> that is useful in determining how to break words in a block of text</p>
</body>
</html>
Advertisements