一、英文換行
Div p{ word-break:break-all; width:150px;}/*只對英文起作用,以字母作為換行依據*/
Div p{ word-wrap:break-word; width:150px;}/*--只對英文起作用,以單詞作為換行依據*/
注意:有的時候英文單詞是一個整體不能拆開!!!(若不同瀏覽器將超出部分隱藏,可以添加:overflow:auto;)
二、中文換行以及強制不換行
Div p{white-space:pre-wrap;width:150px;}/*只對中文起作用,強制換行*/
Div p{white-space:nowrap;width:10px;}/*強制不換行,都起作用*/
三、強制不換行以及超出寬度部分文字隱藏
.p5{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100px;}//*不換行,超出部分隱藏且以省略號形式出現*/
要想兼容ie和ff,需設置white-space: nowrap;,這樣設置,不論是英文還是漢字,也不管是否有空格都會不換行顯示
注意:div或者p標簽里面要有一個寬度才可以換行,要不然沒有作用!!!
解釋:
word-wrap和word-break
word-wrap用來控制換行
兩種取值:
(1)normal
(2)break-word(此值用來強制換行,內容將在邊界內換行,中文沒有任何問題,英文語句也沒問題。但是對於長串的英文,就不起作用。)
word-break用來控制斷詞
三種取值:
(1)normal
(2)break-all(是斷開單詞。在單詞到邊界時,下個字母自動到下一行。主要解決了長串英文的問題。)
(3)keep-all(是指Chinese, Japanese, and Korean不斷詞,一句話一行,可以用來排列古詩喲~)
white-space : normal | pre | nowrap
normal : 默認值。默認處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行
pre : 換行和其他空白字符都將受到保護。這個值需要IE6+或者 !DOCTYPE 聲明為
standards-compliant mode 支持。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode,
此屬性可以使用,但是不會發生作用。結果等同於 normal 。參閱 pre 對象
nowrap : 強制在同一行內顯示所有文本,直到文本結束或者遭遇 br 對象。
兼容性: IE5.5 +, Firefox