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

2021-04-07 05:07:31 字數 2475 閱讀 9797

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

對於div 

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

#wrap

或者#wrap

<

div 

id="wrap"

>

ddd1111111111111111111111111111111111

div>

效果:可以實現換行 

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

#wrap

或者#wrap

<

div 

id="wrap"

>

ddd1111111111111111111111111111111111111111

div>

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

對於table 

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

<

style

>

.tb{}

style

>

<

table 

class

="tbl"

width

="80"

>

<

tr>

<

td>

abcdefghigklmnopqrstuvwxyz 1234567890

td>

tr>

table

>

效果:可以換行 

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

<

style

>

.tb {}

style

>

<

table 

class

="tb"

width

="80"

>

<

tr>

<

td nowrap

>

abcdefghigklmnopqrstuvwxyz 1234567890

td>

tr>

table

>

效果:可以換行 

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

<

style

>

.tb{}

style

>

<

table 

class

="tb"

width

=80>

<

tr>

<

td width

=25% 

nowrap

>

abcdefghigklmnopqrstuvwxyz 1234567890

td>

<

td nowrap

>

abcdefghigklmnopqrstuvwxyz 1234567890

td>

tr>

table

>

效果:兩個td均正常換行 

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

<

style

>

.tb 

{}.td {}

style

>

<

table 

class

=tb 

width

=80>

<

tr>

<

td width

=25% 

class

=td 

nowrap

>

<

div>

abcdefghigklmnopqrstuvwxyz 1234567890

div>

td>

<

td class

=td 

nowrap

>

<

div>

abcdefghigklmnopqrstuvwxyz 1234567890

div>

td>

tr>

table

>

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

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

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

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

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...

CSS製作網頁中的虛線

這裡議決邊框屬性的虛線邊框border控制虛線。以下配置的css 高度 css height 和css 寬度 css width 為350畫素是為了便於 演示 其它意思。一 四邊為虛線邊框 border 1px dashed 000 黑色虛線邊框 例項 css hackhome html 我的四邊為...

css製作網頁酷炫按鈕

css製作網頁酷炫按鈕 當然啦,源 也會給大家的,一起學習一起進步!html doctype html en utf 8 stylesheet type text css href 2.css css按鈕特效 title head button a button a button a body ht...