Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

CSS word-break Property

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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 1.0 and above
  • Edge 12.0 and above
  • Internet Explorer 5.5 and above
  • Firefox 15.0 and above
  • Opera 15.0 and above
  • Safari 3.0 and above

My Personal Notes arrow_drop_up
Last Updated : 06 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials