CSS 超出部分显示省略号
2020-04-24 本文已影响0人
瑟闻风倾
1. 单行超出显示省略号
/*单行超出显示省略号*/
.text-cut {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
如：
<html>
<head>
<style type="text/css">
.div {
width: 300px;
height: 28px;
line-height: 28px;
margin: 50px 0 0 50px;
border: 1px solid gray;
white-space: nowrap;
/*单行超出显示省略号*/
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div class="div">
<span>叮——你有一份年终总结待查收！新年的钟声已经响起，2019年你在简书都留下了哪些痕迹呢？想在简书拥有个性化“私人领地”吗？想跟十万粉写作大咖共同建设简书吗？想获得简书官方资源位曝光吗？</span>
</div>
</body>
</html>
2. 多行超出显示省略号
/*多行超出显示省略号*/
.text-cut {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
如：
<html>
<head>
<style type="text/css">
.content {
width: 300px;
line-height: 1.5;
margin: 50px 0 0 50px;
border: 1px solid gray;
/*多行超出显示省略号*/
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
</head>
<body>
<div class="div">
<span class="content">叮——你有一份年终总结待查收！新年的钟声已经响起，2019年你在简书都留下了哪些痕迹呢？想在简书拥有个性化“私人领地”吗？想跟十万粉写作大咖共同建设简书吗？想获得简书官方资源位曝光吗？</span>
</div>
</body>
</html>
