這篇文章主要介紹“CSS中word-wrap和word-break的區(qū)別是什么”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“CSS中word-wrap和word-break的區(qū)別是什么”文章能幫助大家解決問題。

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、景泰網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、購物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為景泰等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

word-wrap和word-break的區(qū)別

word-break：break-all和word-wrap：break-word兩種寫法都是讓英文句子在父級(jí)寬度不夠的情況下?lián)Q行。兩個(gè)屬性都同樣是讓文字換行，但存在著細(xì)微的區(qū)別，大部分時(shí)候剛接觸到這兩個(gè)屬性時(shí)會(huì)無法區(qū)別。

區(qū)別：

word-wrap：break-word作用是強(qiáng)制讓文字換行。一般情況下當(dāng)父級(jí)寬度不夠的時(shí)候，不管英文單詞自動(dòng)換行是當(dāng)一整個(gè)單詞不夠放時(shí)，整個(gè)單詞一起換行到下一行，看似很合理的寫法，但是在有些情況下會(huì)出現(xiàn)不可預(yù)期的情況。就是當(dāng)一個(gè)英文單詞的長度超過了父級(jí)容器長度時(shí)，英文單詞還是會(huì)顯示一整個(gè)單詞而導(dǎo)致超出容器范圍。

還有一種情況是，當(dāng)遇到一個(gè)單詞很長時(shí)，單詞自動(dòng)換行，也會(huì)使上一行空出很多空間。在這種情況下，IE創(chuàng)造出一種新的屬性，word-break：break-all它強(qiáng)制文字換行，無論一句話到達(dá)父級(jí)容器寬度時(shí)是不是一整個(gè)單詞，都會(huì)強(qiáng)制換行，使單詞斷句，如果碰上一個(gè)單詞超出父級(jí)容器寬度，會(huì)使單詞斷開并換行。

舉例

1、先不給他任何樣式，可以看出那個(gè)超長的單詞已經(jīng)溢出了父級(jí)容器

　　2、現(xiàn)在我們給他加上word-wrap:break-word，你會(huì)發(fā)現(xiàn)那個(gè)超長的單詞將超出的部分顯示在下一行。

　　word-wrap:break-word;

關(guān)于“CSS中word-wrap和word-break的區(qū)別是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。