<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title></title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js" ></script>
<style type="text/css">
div{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;padding-left: 15px;padding-right:15px;box-sizing: border-box; }
</style>
</head>
<body>
<span style="white-space:pre"> </span><div> 多行文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略,内容文字超出长度省略
</div>
</body>
</html>
这是超出两行省略
display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;padding-left: 15px;padding-right:15px;box-sizing: border-box;
行数是由这个控制的
-webkit-line-clamp: 2;