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