Tutorialspoint.dev

CSS | word-break Property

This word-break property is used to specify how to break the word when the word reached at end of 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:

<!DOCTYPE html>
<html>
    <head>
        <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:

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

Syntax:

break-word: break-all

Example:

<!DOCTYPE html>
<html>
    <head>
        <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:

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:

<!DOCTYPE html>
<html>
    <head>
        <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:



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

Syntax:

word-break: break-word;

Example:

<!DOCTYPE html>
<html>
    <head>
        <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:

initial: It sets the property to its default value.

Syntax:

word-break:initial;

Example:

<!DOCTYPE html>
<html>
    <head>
        <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:



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter