CSS網頁製作時實現自動換行的小技巧

2021-04-29 17:57:30 字數 1160 閱讀 6080

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!

對於div

1.(ie瀏覽器)white-space:normal; word-break:break-all;這裡前者是遵循標準。

#wrap

或者#wrap

eg.ddd1111111111111111111111111111111111

效果:可以實現換行

2.(firefox瀏覽器)white-space:normal; word-break:break-all;overflow:hidden;同樣的ff下也沒有很好的實現方法,只能隱藏或者加滾動條,當然不加滾動條效果更好!

#wrap

或者#wrap

eg.ddd1111111111111111111111111111111111111111

效果:容器正常,內容隱藏

對於table

1. (ie瀏覽器)使用樣式table-layout:fixed;

eg.

abcdefghigklmnopqrstuvwxyz 1234567890

效果:可以換行

2.(ie瀏覽器)使用樣式table-layout:fixed與nowrap

eg.

abcdefghigklmnopqrstuvwxyz 1234567890

效果:可以換行

3. (ie瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

效果:兩個td均正常換行

3.(firefox瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap,並且使用div

eg.

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

這裡單元格寬度一定要用百分比定義

效果:正常顯示,但不能換行(注:在ff下還沒有能使容器內容換行的好方法,只能用overflow將多出的內容隱藏,以免影響整體效果)

CSS網頁製作時實現自動換行的小技巧

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!對於div 1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。wrap 或者 wrap div id wrap ddd11111...

CSS網頁製作時實現自動換行的小技巧

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!對於div 1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。wrap 或者 wrap div id wrap ddd11111...

CSS網頁製作時實現自動換行的小技巧

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!對於div 1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。wrap 或者 wrap eg.ddd11111111111111...