多行溢出隐藏显示省略号的兼容性问题

超出一行隐藏显示省略号，相信大家都已经很熟悉了，用css样式来控制，而且没什么兼容性问题

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
复制代码

注意：要给它宽度

多行超出隐藏显示省略号也是可以用css样式来控制的，如下

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
复制代码

注意：要给它宽度和高度 嗯，看起来没什么问题，但是在某些浏览器打开发现是这个样子的

发现-webkit-line-clamp是没有执行到的，测试了一下，发现在谷歌、QQ浏览器、搜狗浏览器，360浏览器的极速模式下是正常显示省略号的，在火狐、ie、360兼容模式下是没有显示省略号的，那么这个问题该怎么解决呢，这个时候，就要用到js啦

直接来个例子： HTML文件内容

<div class="content">
	<ul>
	    <li>
	 	    <div class="content-text">
			多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。
     	    </div>
		</li>
		<li>
	 	    <div class="content-text">
			多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。
     	    </div>
		</li>
		<li>
	 	    <div class="content-text">
			多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。
     	    </div>
		</li>
		<li>
	 	    <div class="content-text">
			多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。多行溢出显示省略号怎么解决兼容行问题呢？这篇文章将会告诉你怎么解决这个问题。
     	    </div>
		</li>
	</ul>
</div>
复制代码

样式文件内容

* {
	margin: 0;
	padding: 0;
}

html,
body {
	width: 100%;
	height: 100%;
}
.content {
	width: 960px;
	height: 100%;
	margin: auto;
	background: #f8f8f8;
}
.content ul {
	width: 640px;
	margin: auto;
	text-decoration: none;
	padding-top: 20px;
}
.content ul li {
	list-style: none;
	margin: 20px 0;
	overflow: hidden;
	font-size: 14px;
	line-height: 28px;
	height: 56px;
}

.content ul li .content-text {
	width: 100%;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.content ul li:first-of-type {
	margin: 0;
}
复制代码

js文件内容

$(function() {
	$(".content li").each(function() {
    	var $this = $(this),
		$text = $(".content-text", $this);
		if($text.height() <= $this.height()) {
			$this.height("auto");
		} else {
			while($text.height() > $this.height()) {
				$text.text($text.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
			}
		}
	})
})
复制代码

转载于:https://juejin.im/post/5af9530b6fb9a07ab9799996