Javascript DOM CSS Style wordBreak Property

Introduction

Break words between any two letters: 

document.getElementById("myDIV").style.wordBreak = "break-all";

Click the button to change the let the DIV element break a text between any two letters:

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {//w  w  w  .j a v  a 2s. com
  width: 150px;
  height: 100px;
  background-color: lightblue;
  border: 1px solid black;
}
</style>
</head>
<body>
<div id="myDIV">testtesttesttesttesttesttesttesttesttesttesttesttesttest</div>
<button onclick="myFunction()">Test</button>

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

</body>
</html>

The wordBreak property specifies line breaking rules for non-CJK scripts.

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

Property Values

Value Description
normalDefault. Break words according to their usual rules
break-all Lines may break between any two letters
keep-all Breaks are prohibited between pairs of letters
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The wordBreak property return a String representing the word-break property of an element.




PreviousNext

Related