多行文本和单行文本超出内容显示省略号
单行：
添加css样式：
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
多行：针对移动端不考虑兼容性
overflow : hidden;
text-overflow: ellipsis; 用省略号“…”隐藏超出范围的文本
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 4; 限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式
http://www.css88.com/archives/5206 详细看这里
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{font-size: 20px;margin: 0;padding: 0;}
body{background: #ccc;}
.box{
background: #fff;
margin: 150px auto;
border: 1px solid red;
width: 200px;
/*height: 100px;*/
}
.a{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<button id="btn">点啊</button>
<div class="box a" id="box">
打飞机的身份动画粉红色的发挥缩放都是发生的发斯是
是打发斯蒂芬SDF 蒂芬放大发埃斯顿烦死哒发多少阿斯
地方阿斯蒂芬阿斯蒂芬是打发啥的 蒂芬按时发斯蒂芬
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
var btn=$("#btn");
var box=$("#box");
// btn.click(function(){
// if(box.hasClass("a")){
// box.removeClass("a")
// }else{
// box.addClass("a")
// }
// })
btn.click(function(){
box.hasClass("a")?
box.removeClass("a"):
box.addClass("a");
})
</script>
</body>
</html>
