多行文本超出用省略号代替,单击展开全部

这里主要讲解一个常见的文字处理程序,在我们开发的过程中,经常会遇到一段很长的文字,但是我们在页面上展示的时候,却需要他展示成几行,比如5行。

这里分享一个自己写的小DEMO,大家可以参考一下:

先看一下效果图:


多行文本超出用省略号代替,单击展开全部_第1张图片
(图一)


多行文本超出用省略号代替,单击展开全部_第2张图片
(图二)


如上“图一”所示,我们在页面加载的时候,让文字显示5行,超出的文字用省略号代替。

当我们点击文字的时候,所有的文字全部展示出来。如“图二”所示。

具体的代码如下:

<html>
	<head>
		<title>多行文字显示省略号</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1">
		<style>
			.context-wrap{
				color: #3f3f3f;
				white-space: normal;
				word-wrap: break-word;
				margin-top: 8px;
				font-size: 16px;
				line-height: 30px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 5;
				text-overflow: ellipsis;
				overflow: hidden;
				min-height: 30px;
			}
			.on {
				color: #3f3f3f;
				white-space: normal;
				word-wrap: break-word;
				margin-top: 8px;
				font-size: 16px;
				line-height: 30px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 0;
				text-overflow: ellipsis;
				overflow: hidden;
				min-height: 30px;
			}
		</style>
		<script>
			window.onload = function(e){
				document.getElementById("test").onclick = function(e){
					if($("#test").hasClass("on")){
						$("#test").removeClass("on").addClass("context-wrap");
					}else{
						$("#test").removeClass("context-wrap").addClass("on");
					}
				};
			}
		</script>
	</head>
	<body>
		<div class="context">					
			<div  id="test" class="context-wrap">	
mayouchen,mayouchen,maouchen,mayouchen.mayoucen,mayouchen,mayouchen,maouchen,mayouchen.mayoucen,mayouchen,mayouchen,maouchen,mayouchen.mayouce,ayouchen,mayouchen,maouchen,mayouchen.mayoucen,mayouchen,mayouchen,maouchen,mayouchen.mayoucen,1111111111122222222222222222224444444444444444555															
			</div>				
		</div>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</body>
	
</html>

这里的代码虽然实现了效果,但是还是不够简洁。有小伙伴看到的话,可以提出自己的意见,在优化一下。

你可能感兴趣的:(小技巧)