文章内容记录自己开发过程中,使用样式,实现单元格内容超出边界时显示省略号的实践过程:
- 浏览器支持:chrome等现代浏览器以及
IE6~IE11
环境测试通过;
实现代码
CSS部分代码
table{
table-layout: fixed;
}
table td{
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
HTML部分代码:
<div>
<table>
<caption>内容超出边界时,用省略号表示示例Demo</caption>
<tr>
<td title="青春,不是年华,而是心境。青春,不是桃面,丹唇,柔膝,而是恢宏的意志,深沉的想象,炙热的感情,青春是生命的深泉在涌流。">
青春,不是年华,而是心境。青春,不是桃面,丹唇,柔膝,而是恢宏的意志,深沉的想象,炙热的感情,青春是生命的深泉在涌流。
</td>
<td>
青春气贯长虹,勇锐盖过怯懦,进取压倒苟安。如此锐气,二十后生有之,六旬男子则更多见。年岁有加,并非垂老;理想丢弃,方堕暮年。
</td>
</tr>
<tr>
<td>
岁月悠悠,衰微只及肌肤;热忱抛却,颓唐必致灵魂。忧烦、惶恐、丧失自信,定使心灵扭曲,意气如灰。
</td>
<td>
无论年届花甲,抑或二八芳龄,心中皆有生命之欢乐,奇迹之诱惑,孩童般天真久盛不衰。
</td>
</tr>
</table>
</div>
说明:
此效果的实现主要依赖于四个属性,分别是:table-layout,white-space,overflow,text-overflow,这四个属性的作用分别是:
- table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多少,如果内容的多少无法估计,那么会导致表格的呈现状态宽高无法保证,使用fixed属性值可以解决此问题;
- white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格;
- overflow: hidden 隐藏超出单元格的部分;
- text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
显示效果图
代码打包
在线演示地址:「表格内容超出单元格大小时显示省略号」,完整的示例代码下载地址:点击这里开始下载;