论坛首页 Web前端技术论坛

如果通过CSS样式设置单元格显示内容的长度

浏览 5740 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-09-07   最后修改:2010-05-13
在实际开发的过程中,我们所使用的table的内容列中的内容往往太长,我们只想让它显示一部分内容该怎么办呢?
当然你可以通过程序后台对内容字段进行截断并加…来实现,但是那样效率肯定不如通过样式来控制!
在给出源码之前还是让我们先来了解一个跟本文要使用的技术有关的知识吧:
table的样式属性table-layout:
table-layout  版本:CSS2  兼容性:IE5+ 继承性:无
语法:
table-layout : auto | fixed
取值:
   auto : 默认值。默认的自动算法。布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来
   fixed : 固定布局的算法。在这种算法中,表格和列的宽度取决于 col 对象的宽度总和,假如没有指定,则会取决于第一行每个单元格的宽度。假如表格没有指定宽度( width )属性,则表格被呈递的默认宽度为 100% 。
[自己总结]
如果指定了table的百分比,并且第一行的每个单元格的宽度之和小于table指定的百分比宽度,则按百分比显示;但是如果指定了table的百分比,并且第一行的每个单元格的宽度之和要大于table指定的百分比宽度,则按第一行的每个单元格的宽度之和显示;同理,如果table指定了固定值,也是同上面一样的呈现。
说明:(说明部分转载)
设置或检索表格的布局算法。
你可以通过此属性改善表格呈递性能。此属性导致IE以一次一行的方式呈递表格内容从而提供给信息用户更快的速度。此属性依据此下顺序使用其中一种方式  布置表格栏宽度:

使用 col 或 colGroup 对象的宽度( width )属性信息。

使用表格第一行内的单元格的宽度( width )信息。

依据表格列数等分表格宽度。而不考虑表格内容的实际宽度。
假如单元格的内容超过了列宽度,内容将会被换行。假如无法换行,则内容会被裁切。假如此属性被设置为 fixed ,则 overflow 能够被用于控制处理溢出单元格( td )宽度的内容。假如表格行高度被指定了,那么换行的内容如果超出了指定表格行高度也会在纵向上被裁切。
设置此属性值为 fixed ,有助于提高表格性能。对于长表格效果尤其显著。
设置表格行高可以进一步提高呈递速度,浏览器不需要检测行内每一个单元格内容去确定行高就可以开始解析以及呈递。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 tableLayout 。

<table bgcolor="red" style="table-layout:fixed">
<tr>
<td  style="width:100px;overflow: hidden; text-overflow:ellipsis;word-break:keep-all" >
这就是你看到的效果了,如果你没有看到的话就对了,如果所有的都看到了那你肯定是什么地方弄错了,没关系,再试试!
</td>
</tr>
</table>



还有一个满足IE FIREFOX等浏览器的公共样式:
.textoverflow a {
 display:block;
 width:120px;
 margin: 0px 0px 0px 3px;
 white-space: nowrap;
 overflow: hidden;
 float: left;
 -o-text-overflow: ellipsis;    /* for Opera */
 text-overflow: ellipsis;        /* for IE */
}

.textoverflow:after{ 
 content: “…”; 
}/* for Firefox */

@media all and (min-width: 0px){
 .textoverflow:after{ content:""; /* for Opera */ 
 }
} 
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics