css实现单行、多行文本溢出显示省略号(…)
zhanghao 2018-01-05
一、单行文本溢出显示省略号(…)
省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。
p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}上面为p标签设置的3个css属性是必须，缺一不可，其中：
text-overflow:定义文本溢出时如何处理，有2个有效值：
①clip：当内联内容溢出块容器时，将溢出部分裁切掉
②ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）
详解：
（1）关于overflow: hidden
这里我们需要注意到一点：这里的overflow并不是设置为父级元素div的属性，而是p标签的属性，需要和overflow的普通用法区分开来
①overflow：hidden的普通用法：用在块级元素（例如div）的外层隐藏内部溢出元素
②overflow: hidden的特殊用法：在上述例子中配合text-overflow: ellipsis;white-space: nowrap;
实现p元素隐藏自身的溢出并设置（...）的效果
（2）关于text-overflow: ellipsis;
这一属性依赖于overflow: hidden存在，只有设置了overflow:hidden它才是能够生效的，你可以把它看作overflow对于文本溢出隐藏的一种‘特殊样式’
（3）关于white-space: nowrap
它的作用是让文本不换行，这是overflow:hidden和text-overflow：ellipsis生效的基础！没有它overflow:hidden和text-overflow：ellipsis无法生效！（在单行文本溢出省略这一案例中）
但是这个属性并不支持多行文本溢出显示省略号。接下来重点说一说多行文本溢出显示省略号，如下。
二、多行文本溢出显示省略号(…)
用CSS实现多行溢出隐藏的代码非常简单，但是兼容性也相对较低。
在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属性，这里使用webkit内核浏览器专用方法，所以可以用在移动端。代码：
<style>
p {
width: 100px;
/*height: 300px;*/
background-color: #2b542c;
overflow: hidden;
display: -webkit-box;/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式--->vertical为垂直排列*/
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Praesentium ut optio et, blanditiis incidunt! Quas saepe accusamus
natus, atque nam impedit temporibus ad et repudiandae aliquam asperiores
aliquid, possimus iste.</p>
</body>上面代码中：
①-webkit-line-clamp：设置文本最多显示行数。
②-webkit-box-orient：不设置将不显示省略号（...）
【注意】
①未设置高度时按照行数显示，设置后仅仅会在设置的行显示省略号（...）
【垮浏览器兼容的方案】
网上查询后都说比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；但经过测试，在IE局限性较大
下面介绍一种JS兼容写法：
先看看我们最终实现的demo:
①在文本没有溢出父级元素时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#view{
line-height: 25px;
}
</style>
</head>
<body>
<div id='view' style='border:1px solid red;width:200px;height:50px;overflow:auto'></div>
<script>
s = '这是一个文本这是一个文本这是一个ssssss文本这是一个文本sss这是一个文本这是一个文本'
el = document.getElementById('view');
n = el.offsetHeight;
for(i=0; i<s.length; i++) {
el.innerHTML = s.substr(0, i);
if(n < el.scrollHeight) {
el.style.overflow = 'hidden';
el.innerHTML = s.substr(0, i-3) + '...';
break;
}
}
</script>
</body>
</html> 首先我们需要弄清楚offsetHeight和scrollHeight所表示的高度： 