超出文本显示省略号

最新推荐文章于 2024-08-31 11:45:00 发布

原创最新推荐文章于 2024-08-31 11:45:00 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#超出文本显示省略号

学习专栏收录该内容

24 篇文章

订阅专栏

本文介绍了如何使用CSS样式处理单行和多行文本溢出的情况，通过设置white-space、overflow、text-overflow等属性实现文本省略号显示，特别针对webkit内核浏览器的多行文本溢出解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、单行文本超出隐藏显示省略号

p{
	white-space:nowrap; ／*强制文本一行显示*／
	overflow:hidden;／*超出元素默认宽度内容隐藏*／
	text-overflow:ellipsis;/* 使用省略号代表有内容未显示*/
}

2、webkit的多行文本溢出隐藏，显示省略号

-webkit-line-clamp:用该属性来限定块元素内文本显示的行数
display：-webkit-box:将对象作为弹性的伸缩盒子显示
-webkit-box-orient：设置伸缩盒子对象内子对象的排列方式
text-overflow：ellipsis；使用省略号告诉用户有内容未显示
overflow：hidden；超出部分隐藏