css控制的内容超过容器宽度后显示省略号 -凯发k8官方网

text-overflow:ellipsis属性在ff中是没有效果的。

同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果
text-overflow是一个比较特殊的属性，在css手册中，这个属性是这样定义的：

语法： 
text-overflow : clip | ellipsis 
参数： 
clip : 　不显示省略标记（...），而是简单的裁切
（clip这个参数是不常用的！）
ellipsis : 　当对象内文本溢出时显示省略标记（...）
说明： 
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
请您注意，text-overflow:ellipsis属性在ff中是没有效果的。

示例：
div { text-overflow : clip; }

　 　text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个 汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用css样式text-overflow: ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。

　　关于text-overflow属性如何应用，我们作如下的说明讲解：

　 　text -overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文 本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效 果。

一般我们看到的比如新闻列表，为了使文字不回行，控制字数，会通过程序让多余的字符显示省略号，我们只使用css可以达到同样的效果，虽然不完美。

li { width:50px; white-space:nowrap; /*一行显示*/text-overflow:ellipsis; /*显示...*/overflow: hidden; /*缺少无效*/}

首先是一个容器，可以是div,li,td等等，先定义宽度，“white-space:nowrap”是强制在一行内显示所有文本，不回行。“text-overflow:ellipsis”就是关键了。

text- overflow是css3新增的属性，ie6以上版本支持。它可以带2个参数：clip [不显示省略标记（...），而是简单的裁切]，ellipsis[当对象内文本溢出时显示省略标记（...）]。所以，这个方法是不支持firefox 的。因此，我们还要加上一句overflow: hidden，让多余文字在ff中隐藏

 

总结

以上是凯发k8官方网为你收集整理的css控制的内容超过容器宽度后显示省略号的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。