當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

CSS word-break用法及代碼示例

此word-break屬性用於指定當單詞到達行尾時如何中斷單詞。文本中的換行符可以出現在某些空格中，例如當有空格或連字符時。

用法:

word-break:normal|break-all|keep-all|break-word|initial|inherit;

屬性：以下是word-break屬性：


  • normal
  • break-all
  • keep-all
  • initial
  • inherit
  • 正常：此屬性使用默認的換行規則。

    用法:

    word-break:normal (default value)

    例：

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

    輸出：

  • break-all：它用於在任何字符處打斷單詞以防止溢出。

    用法:

    break-word:break-all

    例：

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

    輸出：

  • Keep-all：與正常值相同。
    注意：不應將其用於中文/日文/韓文文本。

    用法:

    word-break:Keep-all;

    例：

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

    輸出：

  • break-word：它用於在任意點處打斷單詞以防止溢出。

    用法:

    word-break:break-word;

    例：

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

    輸出：

  • 初始：它將屬性設置為其默認值。

    用法:

    word-break:initial;

    例：

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

    輸出：

支持的瀏覽器：word-break屬性支持的瀏覽器如下所示：

  • 穀歌瀏覽器
  • IE瀏覽器
  • Firefox
  • Opera
  • Safari


相關用法


注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 CSS | word-break Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。