问题描述

• 文本超出一定范围的部分，隐藏并在末尾显示省略号；
• 点击文本，切换查看更多与隐藏状态。

解决方法

• 使用js和css配合结果
  • 只用创建一个隐藏文字的css类
  • js通过模拟jQuery的toggleClass，实现切换文本所在div是否属于css隐藏类

示例（点击下面的文本试一下）

执行代码

<style>
.lookmoretop{
	overflow : hidden;  
	text-overflow: ellipsis;  
	display: -webkit-box;  
	-webkit-line-clamp: 3;  
	-webkit-box-orient: vertical;  
}
</style>
<script>
	function hasClass(obj, cls) {  
		return obj.classList.contains(cls);  
	}  
	function addClass(obj, cls) {  
		obj.classList.add(cls);
	}  
	function removeClass(obj, cls) {  
		obj.classList.remove(cls);
	}
	function toggleClass(obj,cls){  
		if(hasClass(obj,cls)){  
			removeClass(obj, cls);  
		}else{  
			addClass(obj, cls);  
		}
	}
	function showToggles(e){
		toggleClass(e,"lookmoretop");
	}
</script>
<div id="demo" class="lookmoretop" onclick="showToggle(demo)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper vehicula est a aliquam. Vivamus interdum tristique pretium. Donec tempor augue dui, ut ullamcorper magna ultricies quis. Quisque laoreet vitae velit vitae laoreet. Praesent accumsan non ante non aliquam. Nunc lobortis nunc non blandit auctor. Nullam at malesuada dui. Ut a tempor tellus, sed lobortis enim. In leo leo, blandit eget massa quis, posuere consectetur quam. Proin facilisis dictum est sed lacinia.
Integer lacinia, neque sed bibendum faucibus, dolor tellus ultricies magna, eu consectetur nisi ligula vel justo. Etiam erat felis, laoreet vitae facilisis tristique, suscipit vitae tortor. In in mattis lacus. Proin congue fermentum tortor, nec posuere lacus ullamcorper eget. Donec et nisl eu lacus condimentum condimentum et vitae dui. Vestibulum vel imperdiet nulla. Vivamus fermentum sem eu nibh pharetra luctus. Suspendisse potenti. Sed gravida metus non tincidunt aliquet. Sed a urna dignissim, placerat sem eu, tincidunt ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla vitae libero quis ipsum venenatis viverra. Mauris rutrum lorem at eros vestibulum dapibus. Vestibulum non mattis enim, ornare tempus turpis. Donec tempus commodo sem, at tristique tortor hendrerit ut. Proin eros leo, mattis sit amet interdum in, volutpat eu nulla.
</div>

参考链接

• css样式[三行文字省略号查看更多]
• JS原生增删，判断class是否存在方法
• 原生js addclass,hasClass,removeClass,toggleClass的兼容