css強制換行和超出隱藏實現

 

 

1、強制換行 1 word-break: break-all; 只對英文起做用，以字母做爲換行依據。 2 word-wrap: break-word; 只對英文起做用，以單詞做爲換行依據。 3 white-space: pre-wrap; 只對中文起做用，強制換行。 word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的內容自動換行，它們的區別在於： 一、word-break:break-all  假設div寬度爲450px，它的內容就會到450px自動換行，若是該行末端有個很長的英文單詞，它會把單詞截斷，一部分保持在行尾，另外一部分換到下一行。 二、word-wrap:break-word  例子與上面同樣，但區別就是它會把整個單詞當作一個總體，若是該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉。 2、禁止換行  1 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;  white-space:nowrap; 是禁止換行。 overflow:hidden; 是讓多出的內容隱藏起來，不然多出的內容會撐破容器。 text-overflow:ellipsis; 讓多出的內容以省略號...來表達。可是這個屬性主要用於IE等瀏覽器，Opera瀏覽器用-o-text-overflow:ellipsis; 而Firefox瀏覽器沒有這個功能，多出的內容只能隱藏起來。