• 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

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

CSS3 神棍 555℃ 0评论

之前老忘记这个样式,每次想用的时候想不起来了,今天也没写啥子文章,就百度整理了点,以备后用。
下面进入主题
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讨论!

转载请注明:Falost的小窝 » css处理溢出文本 显示为省略符

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (3)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址