單行：
添加css樣式：
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
多行：針對移動端不考慮兼容性
overflow : hidden;
text-overflow: ellipsis; 用省略號“…”隱藏超出范圍的文本
display: -webkit-box; 將對象作為彈性伸縮盒子模型顯示
-webkit-line-clamp: 4; 限制在一個塊元素顯示的文本的行數(shù)
-webkit-box-orient: vertical; 設(shè)置或檢索伸縮盒對象的子元素的排列方式
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">
機的身份動畫粉紅色的發(fā)揮縮放都是發(fā)生的發(fā)斯是是打發(fā)斯蒂芬SDF 蒂芬放大發(fā)埃斯頓煩死噠發(fā)多少阿斯地方阿斯蒂芬阿斯蒂芬是打發(fā)啥的 蒂芬按時發(fā)斯蒂芬
</div>
<script src="[http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js](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>