CSS 強制換行和禁止換行

 在CSS裏,主要有強制換行和禁止換行瀏覽器

1、強制換行spa

      一、word-break: break-all;       只對英文起做用,以字母做爲換行依據。
      二、word-wrap: break-word;   只對英文起做用,以單詞做爲換行依據。
      三、white-space: pre-wrap;     只對中文起做用,強制換行。code

      word-break:break-all 和 word-wrap:break-word都是能使其容器如DIV的內容自動換行,它們的區別在於:ip

一、word-break:break-allit

      假設div寬度爲450px,它的內容就會到450px自動換行,若是該行末端有個很長的英文單詞,它會把單詞截斷,一部分保持在行尾,另外一部分換到下一行。class

二、word-wrap:break-word 容器

      例子與上面同樣,但區別就是它會把整個單詞當作一個總體,若是該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷掉。word

2、禁止換行英文

      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;di

      white-space:nowrap; 是禁止換行。

      overflow:hidden; 是讓多出的內容隱藏起來,不然多出的內容會撐破容器。

      text-overflow:ellipsis; 讓多出的內容以省略號...來表達。可是這個屬性主要用於IE等瀏覽器,Opera瀏覽器用-o-text-overflow:ellipsis; 而Firefox瀏覽器沒有這個功能,多出的內容只能隱藏起來。

相關文章
相關標籤/搜索