4行CSS实现【表格内容超过一行的部分，用省略号代替】【支持IE6】

table{table-layout: fixed;}td{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

原理：

本方法用于解决表格单元格内容过多时的美观问题，主要涉及到4句CSS样式：

1. table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）

2. white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。

3. overflow: hidden 隐藏超出单元格的部分。

4. text-overflow: ellipsis 将被隐藏的那部分用省略号代替。

效果图：

源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><style type="text/css">table{table-layout: fixed;width: 100%;}td{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background-color: #ccc;}</style></head>
<body><table><thead><th>第一列</th><th>第二列</th></thead><tbody><tr><td><span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span><span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span></td><td>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</td></tr></tbody></table>
</body>
</html>

兼容性：

Internet Explorer 6, 7, 8, 9及以上版本

FireFox 最新版

Chrome 最新版

转载于:https://www.cnblogs.com/zhangtao1212/archive/2012/05/10/2494421.html

4行CSS实现【表格内容超过一行的部分，用省略号代替】【支持IE6】相关推荐

CSS实现【表格内容超过一行的部分，用省略号代替】
table{ table-layout: fixed; } td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
CSS控制的内容超过容器宽度后显示省略号
text-overflow:ellipsis属性在FF中是没有效果的. 同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidde ...
CSS 设置文字只显示一行，多余显示省略号
CSS 设置文字只显示一行,多余显示省略号 .view-text{/**思路:1.设置inline-block属相2.强制不换行3.固定高度4.隐藏超出部分5.显示"--"*/di ...
css设置表格内容自动换行
换行是指在文字或者其他内容到达行末时,自动转到下一行的行为.在网页设计中,正确的换行可以使页面看起来更加舒适和自然.在CSS中,实现正确的换行需要了解一些原理和技巧.本文将为您介绍如何使用CSS实现换 ...
计算机设置单元格行高,word表格调整（行高、列宽、单元格宽度）方法技巧-行距怎么设置...
在word中使用表格经常需要针对性调整其行高与列宽,有时侯也需要对某个单元格单独调整宽度(需要注意的是:单元格不能单独调整高度.针对整个表格只有宽度调整.表格高度是通过对每一行的高度来调整.) 表格大 ...
html表格内容溢出隐藏,溢出隐藏：最全的利用css解决内容溢出问题的几种方案...
在p布局中,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱.内容溢出了容器,超出了容器所限定的宽度和高度应该怎么办呢?可以将文本溢出部分进行隐藏或者用省略号代替,那具体 ...
表格内容单/多行展示（一）- 单行/多行显示的方法
分析单行/多行显示涉及到 table-layout: fixed; 这个属性,默认状态下的属性值是 auto (自动表格布局),两种不同的属性值区别如下: 方法我在设置表格内容单行/多行显示时采用 ...
qt 表格中插入一行_在EXCEL表格中，快速插入多行、多列的技巧
在使用Excel过程中,我们会遇到需要插入相同格式的多行或多列,如果一行行或一列列的插入,对于插入的数量较少的情况还是适用的.可是如果需要插入上百的行或列,使用此方法就比较费时费力啦.分享几个小技巧实 ...
excel表格末尾添加一行_在EXCEL表格中，快速插入多行、多列的技巧
在使用Excel过程中,我们会遇到需要插入相同格式的多行或多列,如果一行行或一列列的插入,对于插入的数量较少的情况还是适用的.可是如果需要插入上百的行或列,使用此方法就比较费时费力啦.分享几个小技巧实 ...

4行CSS实现【表格内容超过一行的部分，用省略号代替】【支持IE6】

原理：

效果图：

源代码：

兼容性：

4行CSS实现【表格内容超过一行的部分，用省略号代替】【支持IE6】相关推荐

最新文章

热门文章