CSS word-wrap Property

February 10, 2021 12:37 pm IST

You are Here:

CSS word-wrap Property

CSS word-wrap property allows long words to be able to be broken and wrap onto the next line.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid black; width: 150px; height: 100px; margin-bottom: 10px; } #point{ word-wrap: normal; } #point1{ word-wrap: break-word; } </style> </head> <body> <h1>CSS word-wrap Property</h1> <div id="point"> This text will break to next line WhenWordWrapBreakWordIsUsed. </div> <div id="point1"> This text will break to next line WhenWordWrapBreakWordIsUsed. </div> </body> </html>

Run

Syntax

Using CSS

element{ word-wrap: break-word; }

Using Javascript

object.style.wordWrap="break-word";

Animatable

No, word-wrap property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS word-wrap property is normal.

Property Value

The following table provides a list of values for CSS word-wrap property.

Value	Explanation
normal	Allows only breakable words to be broken.
break-word	Allows both breakable and unbreakable words to be broken.

Using JavaScript

In the following example, we will demonstrate how to change the CSS word-wrap property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid black; width: 150px; height: 100px; margin-bottom: 10px; } </style> </head> <body> <h1>CSS word-wrap Property</h1> <div> This text will break to next line WhenWordWrapBreakWordIsUsed. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.wordWrap = "break-word"; } </script> </body> </html>

Run