CSS 中的強制換行和禁止換行

2022-04-20 13:11:17 字數 2482 閱讀 1458

強制換行

1、word-break: break-all;       只對英文起作用,以字母作為換行依據。

2、word-wrap: break-word;   只對英文起作用,以單詞作為換行依據。

3、white-space: pre-wrap;     只對中文起作用,強制換行。

禁止換行

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

jimdo系統在設計上一直存在乙個bug,那就是在主編輯區,遇到英文或數字字串(比如**)時,沒有設定強制換行,造成頁面被撐破,用ie6瀏覽時,常看到內容錯位,非常影響**的美觀。另一方面,對二分欄結構的**,在側欄放一些文章標題時,如果標題過長它又是自動換行的,也影響版面的美觀。

在css裡,主要有強制換行和禁止換行。

一、強制換行

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

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

各自的效果演示如下:

jimdo系統在設計上一直存在乙個bug,那就是在主編輯區,遇到英文jimdojimdo或數字字串(比如**)時,沒有設定強制換行,造成頁面被撐破,內容錯位,非常影響**的美觀。

jimdo系統在設計上一直存在乙個bug,那就是在主編輯區,遇到英文jimdojimdo或數字字串(比如**)時,沒有設定強制換行,造成頁面被撐破,內容錯位,非常影響**的美觀。

jimdo系統在設計上一直存在乙個bug,那就是在主編輯區,遇到英文jimdojimdo或數字字串(比如**)時,沒有設定強制換行,造成頁面被撐破,內容錯位,非常影響**的美觀。

jimdo系統在設計上一直存在乙個bug,那就是在主編輯區,遇到英文jimdojimdo或數字字串(比如**)時,沒有設定強制換行,造成頁面被撐破,內容錯位,非常影響**的美觀。

jimdo系統在設計上一直存在乙個bug,那就是在主編輯區,遇到英文jimdojimdo或數字字串(比如**)時,沒有設定強制換行,造成頁面被撐破,內容錯位,非常影響**的美觀。

jimdo系統在設計上一直存在乙個bug,那就是在主編輯區,遇到英文jimdojimdo或數字字串(比如**)時,沒有設定強制換行,造成頁面被撐破,內容錯位,非常影響**的美觀。

呵呵,我們看到的效果,好象並不是所說的那樣,可能是現在瀏覽器的版本不同了吧。一般地說,對於強制換行,用word-wrap: break-word; 就可以了。

二、禁止換行

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

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

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

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

下面看下效果演示:

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

三、css換行**在jimdo上的應用

1、強制換行

2、禁止換行

另外,有的朋友喜歡在側欄上用「rss feed」呼叫最新博文,也會出現同樣的問題,如下圖:

下面就來討論一下解決的方法。

li 主要是新增了紅色**,其中width:235px要根據具體版面進行修改。

對於「rss feed」,可以採用同樣的方法進行修改,在css裡新增以下**即可:

.rssfeed

修改以後的效果如下圖:

如果採用的是系統模板,不方便對css直接進行修改的話,可以將上css**加到網頁的「head」中,效果是一樣的,具體方法是:

CSS 強制換行和禁止換行強制換行 和禁止換行樣式

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

CSS 強制換行和禁止換行

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

在CSS裡強制換行和禁止換行

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