前言:文本超出省略使用率非常高,不但可以省空间,也可以使页面看起来更加简洁。
一、单行省略
p { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
单行省略很简单。
二、多行省略
<body>
<style>
div {
width:200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
</style>
<div>
这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。
</div>
</body>
这时就可以实现多行文本显示了。
该效果是通过弹性盒模型来实现的,这就要注意兼容性方面的问题了。
display: -webkit-box;
将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient:vertival;
设置或检索伸缩盒对象的子元素的排列方式 。值vertival为(从上向下垂直排列子元素);-webkit-line-clamp:2;
块元素显示的文本的行数。
①、 display:box; 要加上浏览器前缀,兼容性还是可以的。例如:
display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -o-box;
display : box;
②、box-orient: vertical; 也要加上浏览器前缀。
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-o-box-orient: vertical;
box-orient: vertical;
支持情况
③、-webkit-line-clamp的兼容性就会差一些了
IE、Firefox并不兼容该属性,不过在移动端主流浏览器方面的兼容性还是蛮不错的。
三、检测是否需要省略
var oDiv = document.querySelector('div');
if (oDiv.scrollHeight > oDiv.clientHeight) {
console.log('有省略号');
}
/*
clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小(大多是视口大小)
scrollHeight: 滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度)
offsetHeight: 偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距)
*/
通过比较标签元素的scrollHeight 和 clientHeight 可以得出有没有超出省略。可以在元素后面添加一个“更多”按钮,点击展开被省略的信息。这个也是现在很多网页在用的功能。
四、兼容多行省略
<body>
<style>
.box { position:relative; width:200px; line-height:20px; }
.box .text { width:100%; height:40px; overflow:hidden; }
.box .text-ellipsis::after { position:absolute; bottom:0; right:0;content:'...';
line-height:20px; background:#fff; }
</style>
<div class="box">
<div class="text">这是测试的语句。这是测试的语句。</div>
</div>
<div class="box">
<div class="text">这是测试的语句。这是测试的语句。这是测试的语句。这是测试的语句。</div>
</div>
<script>
var aDiv = document.querySelectorAll('.text');
for(var index = 0,len = aDiv.length; index<len; index++){
var oDiv = aDiv[index];
if (oDiv.scrollHeight > oDiv.clientHeight) {
oDiv.classList.add('text-ellipsis');
}
}
</script>
</body>
运行结果: