CSS word-break – specify line breaking rules between letters

CSS property word-break specifies line breaking rules between letters. Note that this different from word-wrap which applies when word does not fit in line box.

CSS property word-break

CSS version: CSS 3
Value: normal | keep-all | break-all
Initial: normal
Inherited: yes
Animatable: no

word-break values

normalWords are broken according to usual rules.
break-allIn addition to normal break points, word may break at any point.
keep-allBreaks are prohibited between pairs of letters. This is more applicable for CJK words. For other words it behaves same as normal.

Example – normal and break-all word-break

  1. normal: word will only break at natural break points (like dash).
  2. break-all: word will break anywhere between two letters.
In the following code, CSS property word-break can be changed to the following values
  • normal
  • break-all
<style> 
.box {
  width: 100px; 
  background-color: lightgreen;
  word-break: normal;
}
</style>
<div class="box">
This is some text containing 
some very-longwords
</div>
word-break refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments