css多行文本溢出显示省略号

在CSS中，对于多行文本的溢出显示省略号，可以使用display属性配合-webkit-line-clamp和-webkit-box-orient来实现。

具体实现步骤如下：

首先，将需要显示省略号的元素设置为块级元素，并且固定高度。

    .ellipsis {display: block;height: 60px;/* 或者根据需要设置最大高度 */max-height: 60px;}

接着，使用-webkit-box-orient属性将元素内部的子元素按照垂直方向排列。

   .ellipsis {display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;}

然后，使用-webkit-line-clamp属性限制元素内部的文本行数。

    .ellipsis {display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 3; /* 显示3行文本 */}

最后，使用text-overflow属性将超出元素高度的文本内容显示为省略号。

    .ellipsis {display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 3;text-overflow: ellipsis;}

完整的代码如下所示：

    .ellipsis {display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;height: 60px;max-height: 60px;-webkit-line-clamp: 3;text-overflow: ellipsis;}

css多行文本溢出显示省略号相关推荐

css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(-).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...
css多行文本溢出显示省略号（兼容ie）
在日常编写页面中,我们经常遇到内容行数过多时,需要出现 "..." 来处理.但是又要考虑IE浏览器或IE内核浏览器的兼容性. 普通实现方法: display: -webkit-bo ...
css多行超出显示点_CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
如何设置省略号对其序号 html,CSS实现单行、多行文本溢出显示省略号（…）
最好用max-height来限制一下web 若是实现单行文本的溢出显示省略号同窗们应该都知道用text-overflow:ellipsis属性来,固然还须要加宽度width属来兼容部分浏览.浏览器实 ...
CSS单行文本以及多行文本溢出显示省略号解决方案
CSS单行文本以及多行文本显示省略号解决方案文章目录 CSS单行文本以及多行文本显示省略号解决方案单行文本溢出显示省略号多行文本溢出显示省略号第一种效果:仅显示3行文本溢出部分显示省略号第二 ...
CSS基础：单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
纯CSS实现多行文本溢出显示省略号（兼容不同浏览器）
1.单行文本溢出显示省略号单行文本溢出显示省略号比较简单,设置white-space: nowrap避免换行,再设置text-overflow: ellipse即可. <style>.s ...
多行文本溢出显示省略号(…)
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(-).当然部分浏览器还需要加宽度width属性. overflow: hidden; text-over ...

css多行文本溢出显示省略号

css多行文本溢出显示省略号相关推荐

最新文章

热门文章