多行文本和单行文本超出内容显示省略号

最新推荐文章于 2024-09-01 00:14:28 发布

weixin_30881367

最新推荐文章于 2024-09-01 00:14:28 发布

阅读量51

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wyan20/p/5709757.html

版权

单行：

添加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>

// 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>

转载于:https://www.cnblogs.com/wyan20/p/5709757.html

weixin_30881367

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多行文本和单行文本超出内容显示省略号

单行：添加css样式：overflow : hidden;text-overflow: ellipsis;white-space:nowrap;多行：针对移动端不考虑兼容性overflow : hidden;text-overflow: ellipsis; 用省略号“…”隐藏超出范围的文本display: -webkit-box; ...
复制链接

扫一扫