css 自動換行 強制換行屬性 (firefox+ie)
發(fā)布時間:2009-10-13 17:40:39 作者:佚名
我要評論

css 自動換行 強制換行屬性,在實際應(yīng)用中,如果不強制換行會導(dǎo)致頁面變形很難看,所以用下面的方法,即可解決此類問題。
語法:
word-wrap : normal | break-word
取值:
normal : 默認值 。允許內(nèi)容頂開指定的容器邊界
break-word : 內(nèi)容將在邊界內(nèi)換行。如果需要,詞內(nèi)換行( word-break )也將發(fā)生
說明:
設(shè)置或檢索當當前行超過指定容器的邊界時是否斷開轉(zhuǎn)行。
此屬性僅作用于有布局的對象,如塊對象。內(nèi)聯(lián)要素要使用該屬性,必須先設(shè)定對象的 height 或 width 屬性,或者設(shè)定 position 屬性為 absolute ,或者設(shè)定 display 屬性為 block 。
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。
對應(yīng)的腳本特性為 wordWrap 。
語法:
word-break : normal | break-all | keep-all
取值:
normal : 默認值 。允許在詞間換行
break-all : 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 與所有非亞洲語言的 normal 相同。對于中文,韓文,日文,不允許字斷開。適合包含少量亞洲文本的非亞洲文本
說明:
設(shè)置或檢索對象內(nèi)文本的字內(nèi)換行行為。尤其在出現(xiàn)多種語言時。
對于中文,應(yīng)該使用 break-all 。
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。
對應(yīng)的腳本特性為 wordBreak 。
IE、Firefox下都適用。
示例:
<div style="height:100; width:150px; background:red; word-wrap: break-word; word-break: normal;">
這里最好是中文英文的,有連貫的一些字符,才能看出效果,chabaoo.cnwww.baidu.comwww.g.cn
</div>
腳本之家編輯注:
在實際的應(yīng)用中,我們習慣用word-wrap:break-word;word-break:break-all,效果會比較明顯,具體應(yīng)用根據(jù)需要選擇使用。
word-wrap : normal | break-word
取值:
normal : 默認值 。允許內(nèi)容頂開指定的容器邊界
break-word : 內(nèi)容將在邊界內(nèi)換行。如果需要,詞內(nèi)換行( word-break )也將發(fā)生
說明:
設(shè)置或檢索當當前行超過指定容器的邊界時是否斷開轉(zhuǎn)行。
此屬性僅作用于有布局的對象,如塊對象。內(nèi)聯(lián)要素要使用該屬性,必須先設(shè)定對象的 height 或 width 屬性,或者設(shè)定 position 屬性為 absolute ,或者設(shè)定 display 屬性為 block 。
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。
對應(yīng)的腳本特性為 wordWrap 。
語法:
word-break : normal | break-all | keep-all
取值:
normal : 默認值 。允許在詞間換行
break-all : 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字內(nèi)斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all : 與所有非亞洲語言的 normal 相同。對于中文,韓文,日文,不允許字斷開。適合包含少量亞洲文本的非亞洲文本
說明:
設(shè)置或檢索對象內(nèi)文本的字內(nèi)換行行為。尤其在出現(xiàn)多種語言時。
對于中文,應(yīng)該使用 break-all 。
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。
對應(yīng)的腳本特性為 wordBreak 。
IE、Firefox下都適用。
示例:
<div style="height:100; width:150px; background:red; word-wrap: break-word; word-break: normal;">
這里最好是中文英文的,有連貫的一些字符,才能看出效果,chabaoo.cnwww.baidu.comwww.g.cn
</div>
腳本之家編輯注:
在實際的應(yīng)用中,我們習慣用word-wrap:break-word;word-break:break-all,效果會比較明顯,具體應(yīng)用根據(jù)需要選擇使用。
相關(guān)文章
- 自動換行問題,正常字符的換行是比較合理的,而連續(xù)的數(shù)字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹的是CSS如何實現(xiàn)換行的方法2010-08-27
- 自動換行問題,正常字符的換行是比較合理的,而連續(xù)的數(shù)字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹的是CSS如何實現(xiàn)換行的方法2010-08-06
CSS實現(xiàn)強制不換行、自動換行、強制換行的css代碼
CSS實現(xiàn)強制不換行、自動換行、強制換行的css代碼,需要的朋友可以參考下2012-05-03- 因為都瀏覽器的問題,所以要考慮到兼容性。2009-11-20
css文本換行屬性word-wrap和white-space使用總結(jié)
td文字內(nèi)容不換行,發(fā)現(xiàn)是:white-space: nowrap,即強制文本不進行換行,接下來對文本換行的屬性使用進行總結(jié)下,感興趣的朋友可以參考下哈2013-03-31- 自動換行問題,正常字符的換行是比較合理的,而連續(xù)的數(shù)字和英文字符常常將容器撐大,挺讓人頭疼,下面介紹的是CSS如何實現(xiàn)換行的方法對于div,p等塊級元素正常文字的換行(亞洲2014-11-19