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>