word-wrap
The word-wrap CSS property specifies whether the user agent may break at otherwise disallowed points within a line to prevent overflow, when an otherwise-unbreakable string is too long to fit within the line box.
CSS
JS
object.style.wordWrap = "value";
Values
<'word-wrap'> = normal | break-word | anywhere
normal
Lines may break only at allowed break points.
break-word
As for anywhere except soft wrap opportunities introduced by break-word are not considered when calculating min-content intrinsic sizes.
anywhere
An otherwise unbreakable sequence of characters may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line.
Initial
normal
break-word
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
width: 20px;
word-wrap: break-word;
}
</style>
</head>
<body>
<p>break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word break-word</p>
</body>
</html>
anywhere
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
width: 20px;
word-wrap: anywhere;
}
</style>
</head>
<body>
<p>anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere anywhere</p>
</body>
</html>
JS
<!doctype html>
<html>
<head>
<style>
p {
background-color: yellow;
width: 20px;
}
</style>
<script>
function mouseover(value) {
document.getElementsByTagName("p")[0].style.wordWrap = value;
}
</script>
</head>
<body>
<input onmouseover="mouseover(value)" type="button" value="normal">
<input onmouseover="mouseover(value)" type="button" value="break-word">
<input onmouseover="mouseover(value)" type="button" value="anywhere">
<p>word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap word-wrap</p>
</body>
</html>
Internal
External