單行：
添加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](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>