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

創(chuàng)新互聯(lián)專注于全椒企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。全椒網(wǎng)站建設(shè)公司,為全椒等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

word-break:【斷詞】

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

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

默認(rèn)值	normal
繼承性	yes
版本	css3
Javascript語法	object.style.wordBreak="keep-all"

值	描述
normal	使用瀏覽器默認(rèn)的換行規(guī)則。
break-all	允許在單詞內(nèi)換行。
keep-all	只能在半角空格或連字符處換行。

兼容性：

舉個(gè)栗子：

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

默認(rèn)值：	normal
繼承性：	yes
版本：	CSS3
JavaScript 語法：	object.style.wordWrap="break-word"

值	描述
normal	只在允許的斷字點(diǎn)換行（瀏覽器保持默認(rèn)處理）。
break-word	在長單詞或 URL 地址內(nèi)部進(jìn)行換行。

兼容性：

舉個(gè)栗子：【和上面一樣】

未設(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)行尾放不下一個(gè)單詞時(shí)，決定單詞內(nèi)部怎么擺放 => 決定句子末尾放不下單詞時(shí)，單詞是否換行

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

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

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

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

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

附加一個(gè)：文字兩端對齊

屬性：text-align:justify;

兼容性：十分不好

 

text-align:center;

text-align:justify;

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

當(dāng)前名稱：css中word-break和work-wrap有什么區(qū)別
分享鏈接：http://jinyejixie.com/article0/pggdio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、Google、虛擬主機(jī)、面包屑導(dǎo)航、云服務(wù)器、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)