CSS | word-break Property

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;

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



  • normal
  • break-all
  • keep-all
  • initial
  • inherit
  • normal: This property uses the default line break rules.

    Syntax:

    word-break: normal (default value)

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:

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

    Syntax:

    break-word: break-all

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    Syntax:

    word-break: break-word;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

    Syntax:

    word-break:initial;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.