css 自動換行強制換行屬性 (firefox+ie)

2024-07-11 08:45:30

字體：大中小

來源：轉載

供稿：網友

語法：
word-wrap : normal | break-word
取值：
normal :　默認值。允許內容頂開指定的容器邊界
break-word :　內容將在邊界內換行。如果需要，詞內換行( word-break )也將發生
說明：
設置或檢索當當前行超過指定容器的邊界時是否斷開轉行。
此屬性僅作用于有布局的對象，如塊對象。內聯要素要使用該屬性，必須先設定對象的 height 或 width 屬性，或者設定 position 屬性為 absolute ，或者設定 display 屬性為 block 。
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。
對應的腳本特性為 wordWrap 。

語法：
word-break : normal | break-all | keep-all
取值：
normal :　默認值。允許在詞間換行
break-all :　該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
keep-all :　與所有非亞洲語言的 normal 相同。對于中文，韓文，日文，不允許字斷開。適合包含少量亞洲文本的非亞洲文本
說明：
設置或檢索對象內文本的字內換行行為。尤其在出現多種語言時。
對于中文，應該使用 break-all 。
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。
對應的腳本特性為 wordBreak 。

IE、Firefox下都適用。
示例：
<div style="height:100; width:150px; background:red; word-wrap: break-word; word-break: normal;">
這里最好是中文英文的，有連貫的一些字符，才能看出效果，www.survivalescaperooms.comwww.baidu.comwww.g.cn
</div>
武林網編輯注：
在實際的應用中，我們習慣用word-wrap:break-word;word-break:break-all,效果會比較明顯，具體應用根據需要選擇使用。

上一篇：css word-break word-wrap 前臺顯示自動換行

下一篇：CSS 折疊的菜單實現代碼