CSS Property word-break
Normally, line breaks only occur in a space or a hyphen.
When setting word-break to break-all,
line breaks can occur between any character.
Summary
- Initial value
- normal
- Inherited
- yes
- CSS Version
- CSS3
- JavaScript syntax
- object.style.wordBreak="break-all"
- Animatable
- no
CSS Syntax
word-break: normal|break-all|keep-all;
Property Values
- normal
- Default value. Break words according to their usual rules
- break-all
- Lines may break between any character
- keep-all
- Prohibit breaks between pairs of letters
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
word-break |
Yes | Yes | Yes | Yes | Yes |
Example
<!DOCTYPE html>
<html>
<head>
<style>
p.test1 {<!-- w w w.ja v a2s .co m-->
width: 9em;
border: 1px solid #000000;
word-break: keep-all;
}
p.test2 {
width: 9em;
border: 1px solid #000000;
word-break: break-all;
}
</style>
</head>
<body>
<p class="test1">this is a test. this is a test. this is a test. this is a test.</p>
<p class="test2">this is a teeeeeeeeeeeeeeeeeeeest. this is a teeeeeeeeeest. this is a teeeeeeeeeest. </p>
</body>
</html>