【JavaScript】多行文本省略，并且判断是否需要省略。

最新推荐文章于 2024-08-22 11:20:46 发布

汪小穆

最新推荐文章于 2024-08-22 11:20:46 发布

阅读量5.8k

点赞数 3

分类专栏： JavaScript 文章标签：省略超出省略弹性盒模型多行省略判断是否有省略

本文链接：https://blog.csdn.net/w390058785/article/details/79708226

版权

JavaScript 专栏收录该内容

33 篇文章 6 订阅

订阅专栏

前言：文本超出省略使用率非常高，不但可以省空间，也可以使页面看起来更加简洁。

一、单行省略

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>

运行结果：