td之overflow:hidden 多余文本隐藏效果

td之overflow:hidden 多余文本隐藏效果

方法1: table-layout: fixed; width: 200px;

语法： table-layout : auto | fixed

• auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢
• fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关

隐藏对象内的多余文本，一般做法：

selector{ width:200px; white-space:nowrap; overflow:hidden; }　

但是这段代码用在td上不会生效，单元格依然会被撑开～;
解决办法：同时为其table定义width:*; table-layout : fixed OK：多余文本已经被自动隐藏。

产品名称	产品介绍	产品备注
神舟 优雅Q400N	优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器优雅处理器	迅驰4平台，突出的性价比，漂亮的外观

方法2: 在td内加个div，td定义宽度，然后div只要定义高度就可以了。如:

td{ width: 200px; }
td .inner-div{ height:25px; line-height:25px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }