CSS如何控制文本的长度超过一行显示省略号

这篇文章主要为大家展示了“CSS如何控制文本的长度超过一行显示省略号”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS如何控制文本的长度超过一行显示省略号”这篇文章吧。

代码如下：

XML/HTML Code复制内容到剪贴板

<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">
a b c d e f g h i j k l , msa sd sd sa w df f 
</div>

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

以上是“CSS如何控制文本的长度超过一行显示省略号”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！