<html>
<head>
<style type="text/css">
.show_two_line{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
</style>
</head>
<body>
<div class="show_two_line" style="border:1px solid blue">
这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;这是一段很长的文字;
</div>
</body>
</html>
效果如下: