CSS | свойство word-break

Опубликовано: 1 Марта, 2022

Это свойство разрыва слова используется, чтобы указать, как разорвать слово, когда слово достигнуто в конце строки. Разрывы строк в тексте могут появляться в определенных пробелах, например, когда есть пробел или дефис.

Синтаксис:

 слово-разрыв: нормальный | разрыв-все | сохранить-все | разрыв-слово | начальный | наследование;

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

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

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

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

initial: It sets the property to its default value.

Syntax:

word-break:initial;

Example:

<!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
Internet Explorer
Firefox
Opera
Safari

HTML CSS

CSS | свойство word-break

РЕКОМЕНДУЕМЫЕ СТАТЬИ