css控制单、多行文字显示省略

最新推荐文章于 2025-02-13 15:41:57 发布

转载最新推荐文章于 2025-02-13 15:41:57 发布 · 124 阅读

文章标签：

#CSSS

CSS 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何在网页设计中实现单行或多行文本溢出时显示省略号的方法，包括使用CSS属性如overflow、text-overflow和white-space，以及更复杂的多行文本处理技巧。

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

复制于：https://blog.youkuaiyun.com/suolong914/article/details/81606927

实现单行文本的溢出显示省略号

overflow: hidden;//盒子溢出隐藏
text-overflow:ellipsis;//文字溢出显示省略号
white-space: nowrap;//文字不换行

多行文本溢出显示省略号

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;//盒子溢出隐藏

谷歌浏览器的扩展css，故只能在webkit内核的浏览器下使用，兼容性不好。

多行文本溢出显示省略号(兼容性好)

p {
   position: relative;
   line-height: 20px;
   max-height: 60px;//最大高度为行高的整数倍，此处代表3行文本
   overflow: hidden;
}

p::after {//后伪元素
   content: "...";
   position: absolute;
   bottom: 0;
   right: 0;
   padding-left: 40px;
   background: -webkit-linear-gradient(left, transparent, #fff 55%);
   background: -o-linear-gradient(right, transparent, #fff 55%);
   background: -moz-linear-gradient(right, transparent, #fff 55%);
   background: linear-gradient(to right, transparent, #fff 55%);
}

适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。