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>

Click to view the demo