css自動換行有什么技巧?大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是?CSS如何將他們換行的方法!
大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是?CSS如何將他們換行的方法!?
對于div?
1.(IE瀏覽器)white-space:normal;?word-break:break-all;這里前者是遵循標準。
或者
#wrap{word-break:break-all;width:200px;}
<div?id=”wrap”>ddd111111111111111111111111111111</div>
效果:可以實現換行?
2.(Firefox瀏覽器)white-space:normal;?word-break:break-all;overflow:hidden;同樣的FF下也沒有很好的實現方法,只能隱藏或者加滾動條,當然不加滾動條效果更好!?
或者
#wrap{word-break:break-all;width:200px;?overflow:auto;?}?
<div?id=”wrap”>ddd1111111111111111111111111111111111111111</div>
效果:容器正常,內容隱藏?
對于table?
1.?(IE瀏覽器)使用樣式table-layout:fixed;
.tb{table-layout:fixed}
</style>
<table?class=”tbl”?width=”80″>
<tr><td>
abcdefghigklmnopqrstuvwxyz?1234567890
</td></tr>
</table>
效果:可以換行
2.(IE瀏覽器)使用樣式
.tb?{table-layout:fixed}
</style>
<table?class=”tb”?width=”80″><tr><td?nowrap>
abcdefghigklmnopqrstuvwxyz?1234567890
</td></tr>
</table>
效果:可以換行
3.?(IE瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap?
.tb{table-layout:fixed}
</style>
<table?class=”tb”?width=80>
<tr>
<td?width=25%?nowrap>
abcdefghigklmnopqrstuvwxyz?1234567890
</td>
<td?nowrap>abcdefghigklmnopqrstuvwxyz?1234567890</td>
</tr>
</table>
效果:兩個td均正常換行
4.(Firefox瀏覽器)在使用百分比固定td大小情況下使用樣式table-layout:fixed與nowrap,并且使用div?
.tb?{table-layout:fixed}
.td?{overflow:hidden;}
</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將多出的內容隱藏,以免影響整體效果。
