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

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

• 浏览器支持：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 将被隐藏的那部分用省略号代替。

显示效果图

代码打包

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