Javascript Reference - HTML DOM Style wordWrap Property

The wordWrap property gets and sets how to wrap words.

Browser Support


`wordWrap`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the wordWrap property:

var v = object.style.wordWrap

Set the wordWrap property:

object.style.wordWrap='normal|break-word|initial|inherit'

Property Values

Value	Description
normal	Break words at allowed break points
break-word	Break any words
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	normal
Return Value:	A string representing the word-wrap property
CSS Version	CSS3

Example

The following code shows how to break long words to the next line.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--   w  w w .ja  va  2  s  .  c o m-->
    width: 150px;
    height: 100px;
    background-color: lightblue;
    border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDIV">aaaaassssssssssssssaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<button onclick="myFunction()">test</button>

<script>
function myFunction() {
    document.getElementById("myDIV").style.wordWrap = "break-word";
}
</script>

</body>
</html>

The code above is rendered as follows: