用 css 或 js 实现多行文本溢出省略效果
 
CSS版：
 

  
如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性
 
 
.test{
 
width: 100px;
 
height: 46px;
 
overflow: hidden;
 
display: -webkit-box;
 
-webkit-box-orient: vertical;
 
-webkit-line-clamp:2
 
}
 
js版：
 

  
如何用 css 或 js 实现多行文本溢出省略效果，考虑兼容性
 
 
.test{
 
width: 100px;
 
overflow: hidden;
 
position: relative;
 
line-height: 20px;
 
max-height: 40px;
 
}
 
const p = document.querySelector('#test')
 
let words = p.innerHTML.split(/(?<=[\u4e00-\u9fa5])|(?<=\w*?\b)/g)
 
while (p.scrollHeight > p.clientHeight) {
 
words.pop()
 
p.innerHTML = words.join('') + '...'
 
}

大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。
 
CSS代码：
 
overflow: hidden;
text-overflow: ellipsis;
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;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
 
css 代码:
 
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 
这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
 
具体例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/
 
跨浏览器兼容的方案
 
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；
 
例如：
 
css 代码:
 
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}
 
 

 
 
实际应用项目：http://github.crmeb.net/u/long
 
 
 
单行文本溢出显示省略号
 
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
（需要对容器设置单行高度）
 
 
多行文本溢出显示省略号
 
webkit浏览器或移动端的页面
 
   在webkit浏览器或移动端（绝大部分是webkit内核的浏览器）可以直接使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp；
   注意：这是一个不规范的属性，它没有在CSS的规范草案中
   -webkit-line-clamp用来限制在一个块元素显示的文本行数，为了实现效果，他要与一下webkit属性结合使用：
       display:-webkit-box;（必须结合的属性，将对象作为弹性伸缩盒子模型展示）
       -webkit-box-orient（必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式）
 
完整版写法如下：
 
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; (两行文字)
-webkit-box-orient:vertical;
 
**跨浏览器兼容的方案**
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号（...）的元素模拟实现
 
p{
position:relative;
line-height:1.4em;
/*设置容器高度为3倍行高就是显示3行*/
height:4.2em;
overflow:hidden;
}
p::after{
content:'...';
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:#fff;
}
 
注意：IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如<span>...</span>去模拟；要支持IE8，需要将::after替换为:after
 
JavaScript解决方案
 
使用js也可以根据上面的思路去模拟，实现也很简单，推荐两个做类似工作的成熟小工具：
1、clamp.js
2、jQuery插件  jquery.dotdotdot
使用简单，实现方法自行百度

 
本篇教程介绍了HTML+CSS入门 移动端页面实现多行文本溢出显示省略号，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。
 
<
 
手机浏览器种类：
 
UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，其他杂牌浏览器
 
国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自助研发的内核，就像国内的手机操作系统都是基于Android修改的
 
由于移动端(绝大多数都是基于WebKit内核的浏览器)，所以可以直接使用WebKit的CSS扩展属性 -webkit-line-clamp (是WebKit私有属性)；注意：(这个属性没有出现在css规范草案中，不过在WebKit内核中可以正常使用)。
 
CSS代码如下：
 
1 overflow : hidden;
 
2 text-overflow: ellipsis;
 
3 display: -webkit-box;
 
4 -webkit-line-clamp: 2;
 
5 -webkit-box-orient: vertical;
 
1.  overflow:hidden;  设置了这个属性，text-overflow属性才会生效。
 
2.  text-overflow: ellipsis;  用来在多行文本的情况下，用省略号"..."隐藏超出范围的文本内容。
 
3.  display: -webkit-box;  必须结合的属性，将对象作为弹性伸缩盒子模型显示。
 
4.  -webkit-line-clamp: 2;  用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
 
5.  -webkit-box-orient: vertical;  必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
 
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！