首页
产品
快图
小程序
微商城
网站建设
新闻
公司动态
行业资讯
关于
案例
联系
CSS 之强制性换行技能
2021-01-20 14:05
jianzhan
针对div
1.(IE访问器)white-space:normal; word-break:break-all;这里前者是遵照规范。
#wrap{white-space:normal; width:200px; }
或
#wrap{word-break:break-all;width:200px;}
eg.
<div id="wrap">ddd1</div>
实际效果:能够完成换行
2.(Firefox访问器)white-space:normal; word-break:break-all;overflow:hidden;一样的FF下也沒有很好的完成方式,只能掩藏或加翻转条,自然不加翻转条实际效果更好!
#wrap{white-space:normal; width:200px; overflow:auto;}
或
#wrap{word-break:break-all;width:200px; overflow:auto; }
eg.
<div id="wrap">ddd1</div>
实际效果:器皿一切正常,內容掩藏
针对table
1. (IE访问器)应用款式table-layout:fixed;
eg.
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
实际效果:能够换行
2.(IE访问器)应用款式table-layout:fixed与nowrap
eg.
<style>
.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
<style>
.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均一切正常换行
3.(Firefox访问器)在应用百分比固定不动td尺寸状况下应用款式table-layout:fixed与nowrap,而且应用div
eg.
<style>
.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>
这里模块格宽度1定要用百分比界定
实际效果:一切正常显示信息,但不可以换行(注:在FF下都还没能使器皿內容换行的好方式,只能用overflow将多出的內容掩藏,以防危害总体实际效果)
为您推荐
CSS 之强制性换行技能
怎样合理布局登陆网页页面
CSS伪元素 CSS:before CSS伪元素(Pseudo Element
DIV水平竖直垂直居中css完成编码
Web网页页面中8种建立两列等高(等高列合
所有文章
公司动态
行业资讯