标签：
当把text-overflow设为ellipsis时文本溢出内容就能显示为省略标记，而设为clip时就能把文本溢出的部分裁切掉，不过在表格里面使用text-overflow后依旧不能隐藏超出的文本，具体解决方法祥看本文。
在w3cschool中css3中有个文本相关的属性text-overflow，当把它设为ellipsis时文本溢出内容就能显示为省略标记，而设为clip时就能把文本溢出的部分裁切掉，当然，前提是设置好两个属性，那就是white-space:nowrap（强制文本在一行内显示）及overflow:hidden（溢出内容为隐藏），也就是要同时有
{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
}
如果不想出现省略号，就设定高度（高度为一行文字的高度），同时去掉white-space:nowrap （此方法如果标签是td的话ie8是不兼容的）
{
width: **px;
height: **px;
overflow: hidden;
}
因为之前有用过不少次这个属性，而且用得也都很顺利，所以最近在弄一些table的时候遇到了td内的内容太多而出现换行从而影响整体的美观的问题，所以我想把文本不换行而且让超出的文本能显示为省略号，于是我就很自然的就去用了上面那三属性并且也为td设置了长度和宽度，结果神了奇，一直没把超出的文本内容给换成省略号，尝试排除了各种我觉得有可能的影响后依旧不能解决，于是我只好去google一下，后来终于找到了原因，就是要在table的样式里定义一个属性 table-layout:fixed，综上，要想解决表格里面使用text-overflow后依旧不能隐藏超出的文本的问题，就必须完整的使用下面这些属性
td{
text-overflow:ellipsis或clip;
white-space:nowrap;
overflow:hidden;
width:**px;
}
table{
table-layout:fixed;
}
也可以在td里面在嵌套一个span或div标签，在该标签上设置
span{
display: block;
width: **px;
height: **px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
还有如果想鼠标移动上去时显示被隐藏的文本内容，还可以设置
td:hover
{
text-overflow:inherit;
overflow:visible;
}
---------------------------------------------------------------------------------------------------------------------------------------------------------
1、text-overflow: ellipsis;
这里的重点样式是 text-overflow: ellipsis;
不过话说text-ellipsis是一个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。
我在网上看到有很多人说opera不支持text-overflow，可能因为我用的是最新版本的，已经支持这个属性了，所以没办法测试，不过网上给支持低版本的opera一个办法，就是-o-text-overflow：ellipsis；
2、white-space
顺便解释一下white-space的用法
white-space属性声明建立布局过程中如何处理元素中空白符。（废话一句，这里的空白符应该指我们用键盘敲入的空格或回车，因为用 或<br>无论white-space设置什么都会有空格或回车。）
下面是wschool上white-space可能的值：
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
表格里使用text-overflow后不能隐藏超出的文本的解决方法
标签：
原文地址：http://www.cnblogs.com/refe/p/5015211.html
