CSS中幾個(gè)與換行有關(guān)的屬性有哪些-創(chuàng)新互聯(lián)

這篇文章主要講解了“CSS中幾個(gè)與換行有關(guān)的屬性有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS中幾個(gè)與換行有關(guān)的屬性有哪些”吧！

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元云龍做網(wǎng)站,已為上家服務(wù),為云龍各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

word-wrap

 normal 默認(rèn)值。允許內(nèi)容頂開(kāi)指定的容器邊界。
 break-word 內(nèi)容將在邊界內(nèi)換行。如果需要，詞內(nèi)換行也將發(fā)生。
 白話解釋：也就是說(shuō)如果一個(gè)很長(zhǎng)的英文單詞如果超過(guò)了容器長(zhǎng)度，是否折斷英文單詞，默認(rèn)是不折斷。
 支持情況：IE、Firefox 3.6、Chrome 4 中測(cè)試通過(guò)。

word-break
 
 normal 默認(rèn)值。依照亞洲語(yǔ)言和非亞洲語(yǔ)言的文本規(guī)則，允許在字內(nèi)換行。
 break-all 該行為與亞洲語(yǔ)言的 normal 相同。也允許非亞洲語(yǔ)言文本行的任意字內(nèi)斷開(kāi)。該值適合包含一些非亞洲文本的亞洲文本。
 keep-all 與所有非亞洲語(yǔ)言的 normal 相同。對(duì)于中文，韓文，日文，不允許字?jǐn)嚅_(kāi)。適合包含少量亞洲文本的非亞洲文本。
 白話解釋：break-all 把英文單詞拆成一個(gè)一個(gè)的就像亞洲文字一樣可單獨(dú)拆開(kāi)；keep-all 把一長(zhǎng)串亞洲文字當(dāng)作是一個(gè)英文單詞一樣對(duì)待。
 支持情況：IE 支持全部；Firefox 3.6 不支持全部；Chrome 4 不支持 keep-all。

white-space
 
 normal 默認(rèn)值。默認(rèn)處理方式。文本自動(dòng)處理?yè)Q行。假如抵達(dá)容器邊界內(nèi)容會(huì)轉(zhuǎn)到下一行
 pre 換行和其他空白字符都將受到保護(hù)。這個(gè)值需要 IE6+ 或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒(méi)有指定為 standards-compliant mode ，此屬性可以使用，但是不會(huì)發(fā)生作用。結(jié)果等同于 normal 。
 nowrap 強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇 br 對(duì)象。
 白話解釋：pre 源代碼中有幾個(gè)空格，顯示就有幾個(gè)空格；源代碼中有回車換行，顯示也有換行。Nowrap 不見(jiàn) br 不換行，即使是中文漢字超過(guò)了容器大小。
 支持情況：IE、Firefox 3.6、Chrome 4 中測(cè)試通過(guò)，不過(guò) pre 在 IE 中的支持情況還是請(qǐng)參照上面的說(shuō)明。

line-break
 
 normal 默認(rèn)值。應(yīng)用日文文本的默認(rèn)換行規(guī)則。
 strict 強(qiáng)制日文文本換行規(guī)則的嚴(yán)謹(jǐn)性。
 應(yīng)用
強(qiáng)制換行，遇到長(zhǎng)英文單詞，直接將詞折斷。

word-wrap:break-word;
 
 也有人用 break-word:break-all，但考慮到兼容性，還是建議用 word-wrap:break-word;。
 除非遇到 br，否則不管怎樣都不換行。
white-space:nowrap;

附：word-wrap:break-word 與 word-break:break-all 區(qū)別

word-wrap:break-word 是優(yōu)先斷單詞（根據(jù)空格判斷單詞），而 word-break:break-all 完全沒(méi)有把文字當(dāng)單詞看待，在它眼里，都是一塊一塊的字符。
 這就會(huì)造成這么兩情況：
 假如一個(gè) p 有 100px 寬，而其中有很長(zhǎng)一段無(wú)空格的英文字符，完全超過(guò) 100px 了，此時(shí)二者表現(xiàn)相同，都是在邊界處將字符截?cái)唷?br/> 假如一個(gè) p 有 100px 寬，其中有段文字既有中文也有英文，前面是中文，占了 70px，后面一個(gè)很長(zhǎng)的英文單詞有 50px。對(duì)于 word-wrap:break-word 會(huì)將該單詞全部折到下一行輸出，而 word-break:break-all 會(huì)利用剩下的 30px 輸出單詞的前半部分，再到下一行輸出剩下的 20px。
 支持情況：
 word-wrap:break-word 受眾多瀏覽器支持；
 word-break:break-all 受較少瀏覽器支持。

感謝各位的閱讀，以上就是“CSS中幾個(gè)與換行有關(guān)的屬性有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS中幾個(gè)與換行有關(guān)的屬性有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

本文標(biāo)題：CSS中幾個(gè)與換行有關(guān)的屬性有哪些-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://bm7419.com/article48/hccep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄、用戶體驗(yàn)、響應(yīng)式網(wǎng)站、App設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站

廣告

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