css 走出 省略,css处理溢出文本 显示为省略符

之前老忘记这个样式，每次想用的时候想不起来了，今天也没写啥子文章，就百度整理了点，以备后用。

下面进入主题

text-overflow语法：

text-overflow : clip | ellipsis

text-overflow参数值和解释：

clip : 　不显示省略标记(…)，而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记(…)

text-overflow应用说明：

CSS 中 text-overflow设置或检索是否使用一个省略号标记(…)标示对象内文本文字的溢出。

简单理解:就是我要把文本限制在一行中显示出来(white-space: nowrap;)，肯定一行是有宽度限制的，并且做了溢出的部分要隐藏(overflow: hidden；)，然后出现省略号( text-overflow: ellipsis)。

下面以列子为题:

测试页面

神棍哥哥是一个全宇宙最最最最最最最好的人，我们都要爱护他不要欺负他

这个列子中，我们可以看出，我给这个 p 元素设置了一个200像素的宽度，但是这段话的长度已经超出了200像素的范围，并且设置了不换行，那么我们的效果就达到了，当文本超出了指定的宽度之后，就自动隐藏后文，并以(…)显示出来，告诉浏览着，这里还有内容。

文章不足之处，多多留言指教，或加我QQ讨论！

如果你觉得这篇文章不错或者对你有帮助，想请我喝一杯咖啡，可以打赏