css 解決英文字符與阿位伯?dāng)?shù)字自動(dòng)換行
發(fā)布時(shí)間:2009-11-20 20:41:14 作者:佚名
我要評(píng)論

因?yàn)槎紴g覽器的問題,所以要考慮到兼容性。
word-wrap是控制換行的,可?。簑ord-wrap:break-word | normal | break-all | keep-all
break-word:它主要用來是控制是否將強(qiáng)制把單詞換行,對(duì)于中英中文沒有任何問題,但是對(duì)于長(zhǎng)串的英文無效。
normal:英文單詞不被拆開,它是默認(rèn)值。
break-all,主要解決了長(zhǎng)串英文的問題。主要用來是斷開單詞。在單詞到邊界時(shí),下個(gè)字母自動(dòng)到下一行。
keep-all,是指對(duì)于中、日、單詞之間不斷詞。即只用此時(shí),不用word-wrap,中文就不會(huì)換行了。(英文語句正常。)
IE下:使用word-wrap:break-word;所有的都正常。
FF下:如這2個(gè)都不用的話,中文不會(huì)出任何問題。英文語句也不會(huì)出問題。但是,長(zhǎng)串英文會(huì)出問題。
為了解決長(zhǎng)串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式會(huì)導(dǎo)致,普通的英文語句中的單詞會(huì)被斷開(ie下也是)。
最好的方式是 word-wrap:break-word; overflow:hidden;
而不是 word-wrap:break-word; word-break:break-all;
也不是 word-wrap:break-word; overflow:auto;
(Firefox瀏覽器)連續(xù)的英文字符和阿拉伯?dāng)?shù)字的斷行,Firefox的所有版本的沒有解決這個(gè)問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動(dòng)條
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:容器正常,內(nèi)容隱藏.差不多了。
break-word:它主要用來是控制是否將強(qiáng)制把單詞換行,對(duì)于中英中文沒有任何問題,但是對(duì)于長(zhǎng)串的英文無效。
normal:英文單詞不被拆開,它是默認(rèn)值。
break-all,主要解決了長(zhǎng)串英文的問題。主要用來是斷開單詞。在單詞到邊界時(shí),下個(gè)字母自動(dòng)到下一行。
keep-all,是指對(duì)于中、日、單詞之間不斷詞。即只用此時(shí),不用word-wrap,中文就不會(huì)換行了。(英文語句正常。)
IE下:使用word-wrap:break-word;所有的都正常。
FF下:如這2個(gè)都不用的話,中文不會(huì)出任何問題。英文語句也不會(huì)出問題。但是,長(zhǎng)串英文會(huì)出問題。
為了解決長(zhǎng)串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式會(huì)導(dǎo)致,普通的英文語句中的單詞會(huì)被斷開(ie下也是)。
最好的方式是 word-wrap:break-word; overflow:hidden;
而不是 word-wrap:break-word; word-break:break-all;
也不是 word-wrap:break-word; overflow:auto;
(Firefox瀏覽器)連續(xù)的英文字符和阿拉伯?dāng)?shù)字的斷行,Firefox的所有版本的沒有解決這個(gè)問題,我們只有讓超出邊界的字符隱藏或者,給容器添加滾動(dòng)條
#wrap{word-break:break-all; width:200px; overflow:auto;}
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
效果:容器正常,內(nèi)容隱藏.差不多了。
相關(guān)文章
- 本文給大家介紹css文字換行裁剪功能,包括css的一些屬性知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-12-07
css控制文字自動(dòng)換行的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猚ss控制文字自動(dòng)換行的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-12html、css 禁止文字自動(dòng)換行屬性word-break
文字會(huì)自動(dòng)換行,可以使用css來解決這個(gè)問題,word-break屬性想必大家并不陌生吧,不熟悉的朋友可以看看本文2014-05-08div+CSS設(shè)置一行內(nèi)文字超過寬度不換行且不顯示截?cái)辔淖旨?..
當(dāng)一行文字超過DIV或者Table的寬度的時(shí)候,瀏覽器中默認(rèn)是讓它換行顯示的,如果我們不想讓他換行顯示那要怎么辦呢,下面為大家介紹下如何設(shè)置div+CSS設(shè)置一行內(nèi)文字超過寬2013-12-24- 在固定寬度的塊級(jí)元素中,里面的內(nèi)容最后一詞組在寬度不夠的情況下沒有換行,如何讓它換到下一行,這個(gè)問題一直很是疑惑,接下來介紹解決方法,感興趣的朋友可以了解下哦2013-01-10
css是如何實(shí)現(xiàn)在頁面文字不換行、自動(dòng)換行、強(qiáng)制換行的方法
這篇文章主要介紹了css是如何實(shí)現(xiàn)在頁面文字不換行、自動(dòng)換行、強(qiáng)制換行的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-02