小編給大家分享一下css3中word-break屬性有什么用,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)建站主營托克遜網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都APP應(yīng)用開發(fā),托克遜h5微信小程序開發(fā)搭建,托克遜網(wǎng)站營銷推廣歡迎托克遜等地區(qū)企業(yè)咨詢
1、定義
word-break屬性規(guī)定自動換行的處理方法。 提示:通過使用 word-break屬性,可以讓瀏覽器實現(xiàn)在任意位置的換行。
2、語法和參數(shù)
word-break: normal(默認)|break-all|keep-all normal:依照亞洲語言和非亞洲語言的文本規(guī)則,允許在字內(nèi)換行:中文則到邊界處的漢字換行,英文則整個單詞換行,如果出現(xiàn)某個單詞長度過長,則會撐破容器,如果邊框為固定屬性,則后面部分將無法顯示。 break-all:可以強行截斷英文單詞,強行換行。該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本。 keep-all:與所有非亞洲語言的normal相同。對于中文,韓文,日文,不允許字斷開。即如果是中文,將把前后標點符號內(nèi)的一個漢字短語整個換行,英文單詞也整個換行。 注:Firefox、Opera不能識別。
3、說明
word-break:break-all,是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題(恰恰彌補了上面word-wrap:break-word對于長串文字不起作用的缺陷)。
4、例子
繼續(xù)以上面congratulation這個單詞屬于長串英文,word-break:break-all它會把單詞截斷,該行末端就會變成類似conra(congratulation的前端部分),下一行為tulation(conguatulation)的后端部分了。 word-break:keep-all,是指Chinese, Japanese, and Korean不斷詞。即只用此時,不用word-wrap,中文就不會換行了。(英文語句正常。)
5、總結(jié)
作用范圍僅為div這類標準塊級元素,th,td這類table元素雖然識別但是沒有效果(經(jīng)測試Chrome下word-break:break-all是有效果的,但根據(jù)完全兼容性方便記憶角度上來說還是以前面的結(jié)論為準)。Firefox,Opera是無法識別word-break的,更不用提Firefox下的th,td中使用word-break的效果了。
以上是“css3中word-break屬性有什么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!