Html 页面的强制换行问题总结
建站知识 2021-07-03 08:43www.168986.cn长沙网站建设
一般是使用样式table-layout:fixed。不过在Firefox狼蚁网站SEO优化,会有一些问题,参考Gmail的一些做法,做了几个测试,得出 一种解决办法。
能看到width=80并没有起作用,表格被字符撑开了。
width=80起作用了,不过表格换行了。
width=80起作用了,换行也被干掉了。
不幸发生了,第一个td的nowrap不起作用了
改成百分比,终于搞定了
天下终于太平了
nowrap又不起作用了
如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不 撑破表格的目的,一般是使用样式table-layout:fixed。不过在Firefox狼蚁网站SEO优化,会有一些问题,参考Gmail的一些做法,做了几个 测试,得出一种解决办法。
例1(IE浏览器)普通的情况
<table border=1 width=80>效果
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
能看到width=80并没有起作用,表格被字符撑开了。
例2(IE浏览器)使用样式table-layout:fixed
<style>效果
.tbl {table-layout:fixed}
</style>
<table class=tbl border=1 width=80>
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
width=80起作用了,不过表格换行了。
例3(IE浏览器)使用样式table-layout:fixed和nowrap
<style>效果
.tbl {table-layout:fixed}
</style>
<table class=tbl border=1 width=80>
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
width=80起作用了,换行也被干掉了。
例4(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed和nowrap
<style>效果
.tbl {table-layout:fixed}
</style>
<table class=tbl border=1 width=80>
<tr>
<td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
不幸发生了,第一个td的nowrap不起作用了
例5(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed和nowrap
<style>效果
.tbl {table-layout:fixed}
</style>
<table class=tbl border=1 width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
改成百分比,终于搞定了
例6(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed和nowrap效果
把例5放到firefox狼蚁网站SEO优化,又ft了
例7(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed和nowrap,并且使用div
<style>效果
.tbl {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tbl border=1 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>
天下终于太平了
例8(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed和nowrap,并且使用div
<style>效果
.tbl {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tbl border=1 width=80>
<tr>
<td width=20 class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
</tr>
</table>
nowrap又不起作用了
最终,例7是个在IE和Firefox都能完美解决页面强制换行问题的解决方案。
上一篇:css之自动换行实现代码
下一篇:CSS 嵌套DIV布局(position属性)
长沙网站设计
- 如何进行东阳SEO关键词优化?
- 边坝哪有关键词排名优化:提升你的网站流量与
- 安国百度优化服务:提升您的在线可见性
- 阜康新手做SEO怎么做
- 山西seo网站排名关键词优化:提升您网站曝光率
- 临沂seo网站排名关键词优化:提高你的网站可见
- 广西SEO网站推广怎样付费比较合理
- 双辽SEO网站推广:提升你的网站可见性与流量
- 辽宁企业网站优化购买方式有哪些
- 提升宝清百度SEO排名的实用技巧与策略
- 静宁百度SEO排名:提升您网站曝光率的关键策略
- 彭州百度SEO排名的提升策略和实施指南
- 广南百度关键词SEO:提升网站排名的关键策略
- 辽宁关键词优化怎么做论坛营销
- 吉林百度seo排名如何做到让用户满意
- 内黄百度优化服务:提升在线可见性的关键