表格内容超出单元格大小时显示省略号

文章内容记录自己开发过程中,使用样式,实现单元格内容超出边界时显示省略号的实践过程:

  • 浏览器支持: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,这四个属性的作用分别是:

  1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多少,如果内容的多少无法估计,那么会导致表格的呈现状态宽高无法保证,使用fixed属性值可以解决此问题;
  2. white-space: nowrap 是为了保证无论单元格(TD)中文本内容有多少,都不会自动换行,此时多余的内容会在水平方向撑破单元格;
  3. overflow: hidden 隐藏超出单元格的部分;
  4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

显示效果图

20160604051456_20307.png

代码打包

在线演示地址:「表格内容超出单元格大小时显示省略号」,完整的示例代码下载地址:点击这里开始下载

赞(0)
未经允许禁止转载:优米格 » 表格内容超出单元格大小时显示省略号

评论 抢沙发

合作&反馈&投稿

商务合作、问题反馈、投稿,欢迎联系

广告合作侵权联系