css 段落文本省略号表示

橘子柿子Coox

已于 2024-04-08 19:56:42 修改

阅读量250

点赞数

文章标签： css 前端 javascript

于 2023-05-23 10:42:34 首次发布

本文链接：https://blog.youkuaiyun.com/Ttowx/article/details/130822070

版权

这篇文章介绍了如何使用CSS来处理文本溢出，特别是如何实现单行和多行的文本省略效果，适用于Webkit浏览器。通过`overflow:hidden`，`text-overflow:ellipsis`和`white-space:nowrap`可以实现单行文本省略，而`-webkit-line-clamp`和`-webkit-box`属性则用于在Webkit支持下实现多行文本的省略。

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

单行文本：

{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

css代码：

.ellipsis{
   width: 100%;
  max-height: 146px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  display: -webkit-box;//只针对webkit引擎的浏览器
  -webkit-line-clamp: 8;//行高乘以8，当文本高度超过该高度时，超出部分文本省略...
  -webkit-box-orient: vertical；//子元素垂直排列
}

外部链接：[https://www.runoob.com/w3cnote/front-end-interview-a-few-important-points-of-knowledge.html]
https://minjiechang.github.io/css/textOverflow/
(https://www.runoob.com/w3cnote/front-end-interview-a-few-important-points-of-knowledge.html)