css中word-break和work-wrap有什么區(qū)別

這篇文章給大家分享的是有關(guān)css中word-break和work-wrap有什么區(qū)別的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

word-break:【斷詞】

定義：規(guī)定自動換行的處理方法.   注：通過word-break使用，可以實現(xiàn)讓瀏覽器在任意位置換行。

語法：word-break: normal|break-all|keep-all;

兼容性：

舉個栗子：

<span class="text-s">iIanishttp://3iuiuskjfksjj.com/test_abjcljlj/?daydayupdadyda=dayayupupdaalurupsjlsjfljlsfjljljouwrouowurouorwurouurowurouwruwouour</span>    
.text-s {    
    display: inline-block;    
    width: 240px;    
    // word-break: keep-all;    
}

未設(shè)置word-break：

設(shè)置word-break:break-all;

設(shè)置word-break:keep-all;或者word-break:normal;

word-wrap:【換行】

 定義：允許長單詞或 URL 地址換行到下一行。

語法:word-wrap: normal|break-word;

兼容性：

舉個栗子：【和上面一樣】

未設(shè)置word-wrap：

設(shè)置word-wrap:normal;

設(shè)置word-wrap:break-word;

對比上述栗子設(shè)置word-break:break-all;和word-wrap:break-word的差別

總結(jié)：

word-break:當(dāng)行尾放不下一個單詞時，決定單詞內(nèi)部怎么擺放 => 決定句子末尾放不下單詞時，單詞是否換行

    break-all：強行擺放，擠不下剩下的就換下一行顯示。

    keep-all：放不下，就另外起一行展示；如果還放不下就溢出顯示。

word-wrap：當(dāng)行尾放不下時，決定單詞內(nèi)是否允許換行 => 決定單詞內(nèi)該怎么換行

    normal：單詞太長，換行顯示，在超過一行就溢出顯示。

    break-word：當(dāng)單詞太長時，先嘗試換行；換行后還是太長，單詞內(nèi)還可以換行。

附加一個：文字兩端對齊

屬性：text-align:justify;

兼容性：十分不好

text-align:center;

text-align:justify;

感謝各位的閱讀！關(guān)于“css中word-break和work-wrap有什么區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！