css強制折行和隱藏超出部分

2022-07-15 01:27:10 字數 1527 閱讀 1723

一、強制換行

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 

例子與上面一樣,但區別就是它會把整個單詞看成乙個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷掉。

二、禁止換行 

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

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

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

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

一、強制換行

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 

例子與上面一樣,但區別就是它會把整個單詞看成乙個整體,如果該行末端寬度不夠顯示整個單詞,它會自動把整個單詞放到下一行,而不會把單詞截斷掉。

二、禁止換行 

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

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

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

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

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

一 強制換行 1 word break break all 只對英文起作用,以字母作為換行依據。2 word wrap break word 只對英文起作用,以單詞作為換行依據。3 white space pre wrap 只對中文起作用,強制換行。word break break all 和 wo...

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

一 強制換行 1 word break break all 只對英文起作用,以字母作為換行依據。2 word wrap break word 只對英文起作用,以單詞作為換行依據。3 white space pre wrap 只對中文起作用,強制換行。word break break all 和 wo...

css文字超出部分省略號 CSS強制換行總結

word break break all例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單詞很長 congratulation等 它會把單詞截斷,變成該行末端為conra congratulation的前端部分 下一行為tulation conguatulation 的...