Posted By
Bajarangi soft ,
Posted On 30-09-2020
The wordWrap property allows long words to be able to be broken and wrap onto the next line.
Syntax and Usage
Return the wordWrap property: object.style.wordWrap Set the wordWrap property: object.style.wordWrap = "normal|break-word|initial|inherit"
Property Values
| Value | Description |
|---|---|
| normal | Break words only at allowed break points |
| break-word | Allows unbreakable words to be broken |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Return Value: A String, representing the word-wrap property of an element.
Example(1)
<div id="DIV">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<br>
<button class="btn btn-info" onclick="break_function()">Click it</button>
<script>
function break_function() {
document.getElementById("DIV").style.wordWrap = "break-word";
}
</script>
In above example when you click button it will change the let the DIV element wrap words.
Complete code for CSS Style WordWrap Properties With JavaScript
<!DOCTYPE html>
<html>
<head>
<title>How To Use CSS Style WordWrap Properties With JavaScript</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h1 {
color: red;
}
#DIV {
width: 200px;
height: 200px;
background-color: hotpink;
border: 1px solid black;
font-size: 30px;
color: white;
}
</style>
<body>
<div class="container">
<br>
<div class="text-center">
<h1>Use CSS Style WordWrap Properties With JavaScript</h1>
</div>
<br>
<div class="well">
<div id="DIV">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
<br>
<button class="btn btn-info" onclick="break_function()">Click it</button>
</div>
</body>
</html>
<script>
function break_function() {
document.getElementById("DIV").style.wordWrap = "break-word";
}
</script>