表格里使用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 属性的值。

转载于:https://www.cnblogs.com/refe/p/5015211.html