Javascript Reference - HTML DOM Style wordBreak Property

The wordBreak property sets and gets line breaking rules for non-CJK scripts.

CJK scripts are Chinese, Japanese and Korean ("CJK") scripts.

Browser Support


`wordBreak`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the wordBreak property:

var v = object.style.wordBreak

Set the wordBreak property:

object.style.wordBreak='normal|break-all|keep-all|initial|inherit'

Property Values

Value	Description
normal	Default value. Break words as usual
break-all	Lines may break between any two letters
keep-all	Don't break between letters
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

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

Example

The following code shows how to break words between any two letters.


<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {<!--  ww 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">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

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

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

</body>
</html>

The code above is rendered as follows: