多行文本溢出显示省略号

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/39NCyZvm8EYiJ-pEEtjxGw 作者：何彦军 目前在移动端开发的展示界面中，如果一段文本的数量过长，受限于屏幕的宽高等因素，有可能不能完全显示，这个时候就会把溢出的文本显示成省略号。 最近就亲身经历了一系列类似的需求，于是这里做个总结和记录。 首先一个最基本的需求就是当文本超过一行最大宽度时，超出的部分变为省略号，如下图所示。 这个功能比较基础，只用css就可以实现，如下图所示代码块。 可是有时候产品同学希望显示的文本可以再多一点，于是就有了多行文本溢出显示省略号的需求，如下图所示。 这个功能也可以通过css实现，如下图代码块所示。 这里用到了webkit的css扩展属性，因此适用于webkit浏览器及移动端，并且在兼容性方面也有些影响，但是只要不是特别老旧的机器，还是完全能够支持的。 在支持了多行文本溢出显示省略号的功能之后，产品同学又发现了体验不友好的点，如下图所示。文本在第二行开头处就结束了，这就导致第二行大部分是空白的，影响了美观度。 因此，产品同学提出了一个新需求： 当文本没有超过第x行的一半时，则按第x-1行溢出显示省略号的方式展示；（第1行除外） 当文本超过第x行的一半但没有超过第x行时，则正常展示； 当文本超过第x行时

限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 CSS代码： .box { width: 400px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。

大家应该都知道用 text-overflow:ellipsis 属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度 width 属性。 1 overflow : hidden ; 2 text - overflow : ellipsis ; 3 white - space : nowrap ; 但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性) -webkit-line-clamp ；注意：这是一个 不规范的属性（ unsupported WebKit property ），它没有出现在 CSS 规范草案中。 -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…

//单行文本溢出 .one{　 　　width: 200px; 　　border: 1px solid #000; 　　overflow: hidden; //溢出文本隐藏 　　text-overflow: ellipsis; //溢出文本显示省略号 　　white-space: nowrap; //强制不换行 } // 多行溢出 只能在手机端使用 在PC端使用会有兼容 <p class="one"> 我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字 </p> .two{ 　　width: 200px; 　　border: 1px solid #000; 　　display: -webkit-box; //必须的属性 ，将对象作为弹性伸缩盒子模型显示 　　-webkit-line-clamp: 5; // 设定在哪一行显示省略号 　　-webkit-box-orient: vertical; //必须的属性 ，设置或检索伸缩盒对象的子元素的排列方式 　　overflow: hidden; //溢出文本隐藏 　　text-overflow: ellipsis; //溢出文本显示省略号 } <p class="two"> 我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字 我是一大段文字,哈哈哈哈哈我是一大段文字,哈哈哈哈哈我是一大段文字

(单行)省略号： overflow: hidden; white-space: nowrap; text-overflow: ellipsis; （双行）省略号： overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 注： 在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性) -webkit-line-clamp ；注意：这是一个 不规范的属性（ unsupported WebKit property ），它没有出现在 CSS 规范草案中。 -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： 1 p{ 2 overflow: hidden; 3 text-overflow:ellipsis; 4 white-space: nowrap; 5 } 效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如下。 实现方法 p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } 　　 效果如图： 适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如下。 实现方法： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 效果如图： 适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 实现方法： p{position: relative; line-height: 20px; max-height:

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。 实现方法： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图： 但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。 接下来重点说一说多行文本溢出显示省略号，如下。 实现方法： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; 效果如图： 适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 实现方法： p{position: relative; line-height: 20px; max-height:

单行文本溢出隐藏： overflow: hidden; 单行文本溢出隐藏显示省略号： white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行文本溢出隐藏显示省略号： text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 多行文本溢出隐藏时，-webkit-line-clamp: 3; 把3改成几就显示几行。灵活多变。 原文链接： https://blog.csdn.net/vipbin520/article/details/81483955 来源： https://www.cnblogs.com/panghu123/p/11919314.html

1⃣️ ：实现单行文本的溢出显示省略号 用text-overflow:ellipsis属性，当然还需要加宽度width属来兼容部分浏览。 实现方法： overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图： 2⃣️：多行文本溢出显示省略号 （方法一） 实现方法： display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;效果如图： 适用范围： 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 3⃣️：多行文本溢出显示省略号 （方法二） p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;} p::after