之前老忘记这个样式,每次想用的时候想不起来了,今天也没写啥子文章,就百度整理了点,以备后用。
下面进入主题
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讨论!
如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏