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

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

1 Марта, 2022
1 Марта, 2022
1 Марта, 2022
1 Марта, 2022
1 Марта, 2022
1 Марта, 2022