CSS word-break Property

February 10, 2021 12:37 pm IST

You are Here:

CSS word-break Property

CSS word-break property sets whether line breaks appear wherever the text would otherwise overflow its content box.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ padding: 10px; border: 1px solid #000; font-size: 17px; width: 180px; margin-bottom: 10px; } #point{ word-break: normal; } #point1{ word-break: keep-all; } #point2{ word-break: break-all; } #point3{ word-break: break-word; } </style> </head> <body> <h1>CSS word-break Property</h1> <h2>word-break: normal;</h2> <div id="point"> This text will break to next line 这是绕道而行的好方法 WhenWordBreakBreakAllIsUsed. </div> <h2>word-break: keep-all;</h2> <div id="point1"> This text will break to next line 这是绕道而行的好方法 WhenWordBreakBreakAllIsUsed. </div> <h2>word-break: break-all;</h2> <div id="point2"> This text will break to next line 这是绕道而行的好方法 WhenWordBreakBreakAllIsUsed. </div> <h2>word-break: break-word;</h2> <div id="point3"> This text will break to next line 这是绕道而行的好方法 WhenWordBreakBreakAllIsUsed. </div> </body> </html>

Run

Syntax

Using CSS

element{ word-break: keep-all; }

Using Javascript

object.style.wordBreak="keep-all";

Animatable

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

Default Value

Default value for CSS word-break property is normal.

Property Value

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

Value	Explanation
normal	Use the default line break rule.
keep-all	Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.
break-all	To prevent overflow, word may be broken at any character.
break-word	To prevent overflow, word may be broken at arbitrary points.

Using JavaScript

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

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ padding: 10px; border: 1px solid #000; font-size: 17px; width: 180px; margin-bottom: 10px; } </style> </head> <body> <h1>CSS word-break Property</h1> <div> This text will break to next line 这是绕道而行的好方法 WhenWordBreakBreakAllIsUsed. </div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.wordBreak = "keep-all"; } </script> </body> </html>

Run