单行：
添加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>
网友评论