Open In App

CSS word-break Property

Last Updated : 21 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

This word-break property is used to specify how to break the word when the word reached at end of the line. The line breaks in the text can occur in certain spaces, like when there is a space or a hyphen.

Syntax:  

word-break: normal|break-all|keep-all|break-word|initial|inherit;

Default Value: Normal

Properties: There are word-break property which are given below:  

  • normal
  • break-all
  • keep-all
  • initial
  • inherit

1. normal: This property uses the default line break rules.

Syntax: 

word-break: normal (default value)

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS word-break Property
    </title>
    <style>
        p {
            width: 140px;
            border: 1px solid #000000;
        }
         
        gfg.a {
            word-break: normal;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>word-break: normal (default):</h2>
        <p class="gfg">
            GeeksforGeeksGeeksGeeks.
            A computer science portal for geeks.
        </p>
 
    </center>
</body>
 
</html>


Output:  

2. break-all: It is used to break the words at any character to prevent overflow.

Syntax: 

break-word: break-all

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS word-break Property
    </title>
    <style>
        p {
            width: 142px;
            border: 1px solid #000000;
        }
          
        p.gfg {
            word-break: break-all;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h2>word-break: break-all;</h2>
        <p class="gfg">
            GeeksforGeeksGeeksGeeks. A
            computer science portal for geeks .
        </p>
    </center>
</body>
 
</html>


Output:  

3. Keep-all: It is same as value normal. 

Note: It should not be used for Chinese/Japanese/Korean text.

Syntax: 

word-break: Keep-all;

Example:  

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS word-break Property
    </title>
    <style>
        p {
            width: 140px;
            border: 1px solid #000000;
            color:black;
        }
        p.gfg {
            word-break: keep-all;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>word-break: Keep-all</h2>
        <p class="gfg">
            GeeksforGeeksGeeksGeeks.A
            computer science portal for geeks.
        </p>
    </center>
</body>
 
</html>


Output: 

4. break-word: It is used to broken the words at arbitrary points to prevent overflow.

Syntax: 

word-break: break-word;

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS word-break Property
    </title>
    <style>
        p {
            width: 140px;
            border: 1px solid #000000;
            color:black;
        }
        p.gfg {
            word-break: break-word;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>word-break: break-word</h2>
        <p class="gfg">
            GeeksforGeeksGeeksGeeks.A
            computer science portal for geeks.
        </p>
    </center>
</body>
 
</html>


Output: 

5. initial: It sets the property to its default value.

Syntax: 

word-break:initial;

Example: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        CSS word-break Property
    </title>
    <style>
        p {
            width: 140px;
            border: 1px solid #000000;
            color:black;
        }
        p.gfg {
            word-break:initial;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>word-break:initial;</h2>
        <p class="gfg">
            GeeksforGeeksGeeksGeeks.A
            computer science portal for geeks.
        </p>
    </center>
</body>
 
</html>


Output: 

Supported browsers: The browsers supported by word-break Property are listed below: 

  • Google Chrome
  • Edge
  • Firefox
  • Opera
  • Safari


Previous Article
Next Article

Similar Reads

What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?
The word-break property in CSS is used to specify how a word should be broken or split when reaching the end of a line. The word-wrap property is used to split/break long words and wrap them into the next line. Difference between the "word-break: break-all;" and "word-wrap: break-word;" word-break: break-all; It is used to break the words at any ch
2 min read
How to define word-break property to allow words to be continued to the next line in CSS ?
In this article, we will see how to define a word-break property to allow words to be continued to the next line in CSS. You can use break-all and break-word property values to define the word-break property which is used to specify how to break the word when the word reached at end of the line. Syntax: word-break: break-all | break-word; Property
2 min read
Tailwind CSS Word Break
This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS word-break property. This class is used to specify how to break the word when the word reached at end of the line. The line breaks in the text can occur in certain spaces, like when there is a space or a hyphen. Wor
2 min read
Primer CSS Typography Word-Break
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, an
2 min read
How to wrap or break long text/word in a fixed width span ?
In this article, we will see how to wrap long text/word in a fixed-width span. The word-wrap property in CSS is used to break long words and wrap them into the next line. It defines whether to break words when the content exceeds the boundaries of its container. Syntax: word-wrap: normal|break-word|initial|inherit; Example 1: The following code dem
1 min read
Bootstrap 5 Text Word break
Text Word break is used to break the long string. Prevent long strings of text from breaking your components' layout by using text-break. This class is deprecated because a line break is not possible in Arabic, and the most used RTL language is Arabic. Bootstrap 5 Text Word break Class: text-break: This class is used to break the line. Syntax: &lt;
2 min read
JavaScript Program for Word Break Problem
The word break problem is a well-known and fundamental challenge within the field of computer science. The Word Break Problem in JavaScript involves determining if a given string can be segmented into words from a dictionary. It seeks to find a valid combination of dictionary words that compose the entire input string. In this context, a 'word' is
3 min read
CSS page-break-before Property
The page-break-before property in CSS is used to add a page-break-before the specified element. This property helps to define how a document should behave when it is printed. Similarly page-break-before, page-break-after and page-break-inside all three properties are instrumental in determining and hence defining how the resultant document would be
6 min read
CSS box decoration break Property
The box-decoration-break property is used to control the box decoration after the fragmentation of the paragraph. It defines the background, padding, border, margin, and clip-path of an element that is applied when the box for the element is broken into separated parts. Default Value: slice Syntax: box-decoration-break: slice|clone|initial|inherit;
3 min read
CSS page-break-after Property
The page-break-after property in CSS is used to add a page-break after the stated element. Similarly, page-break-before, page-break-after, and page-break-inside all three properties are instrumental in determining and hence defining how the resultant document would be when printed. Note: The page-break-after property cannot be used on absolutely po
9 min read