前端面试题：css第n行显示超出以...显示

最新推荐文章于 2024-04-07 17:56:18 发布

啃火龙果的兔子

最新推荐文章于 2024-04-07 17:56:18 发布

阅读量138

点赞数

分类专栏： web面试 CSS 开发DEMO 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_43592064/article/details/131802071

版权

开发DEMO 同时被 3 个专栏收录

144 篇文章 1 订阅

订阅专栏

web面试

82 篇文章 6 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

该文章介绍了如何使用CSS样式来处理文本溢出问题，对于单行文本，通过overflow:hidden,text-overflow:ellipsis和white-space:nowrap来实现省略号效果；而对于多行文本，利用-webkit-line-clamp属性限制显示的行数，达到溢出隐藏并显示省略号的目的。

摘要由CSDN通过智能技术生成

多行

{
 overflow:hidden;
 text-overflow:ellipsis;
 display:-webkit-box;
 -webkit-line-clamp:2;//想要的行数
 -webkit-box-orient:vertical;
}

单行

.p{
  //单行文本溢出
  overflow: hidden;
  text-overflow:ellipsis;  //文本溢出显示省略号
  white-space:nowrap;      //文本不会换行（单行文本溢出）
  width:130px;
  background-color: red;
}