学透CSS- line-clamp 限制你的内容行数（...）
【摘要】 前言最近在浏览时候，在首页看到了发现了这样一个有趣的现象：大家仔细看有啥不同，一个是广告，一个是文章。其实是摘要显示的行数不同的。广告是两行，文章摘要是一行。当我做了下面的操作：将line-clamp 取消掉，就显示出完整的文本。 line-clamp它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-or...
前言
最近在浏览时候，在首页看到了发现了这样一个有趣的现象：
大家仔细看有啥不同，一个是广告，一个是文章。其实是摘要显示的行数不同的。广告是两行，文章摘要是一行。
当我做了下面的操作：将line-clamp 取消掉，就显示出完整的文本。
line-clamp
它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient (en-US) 属性设置成 vertical时才会生效。
语法
.元素 { line-clamp: [none | <integer>]; }
设置截断内容前的最大行数，然后在最后一行的末尾显示省略号 (…)
目前在使用的时候必须是 -webkit-line-clamp
这个是因为line-clamp是CSS3提出的，目前的兼容性不好。
虽然caniuse上很好！
Chrome实测：
举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 300px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<div>
大家仔细看有啥不同，~~一个是广告，一个是文章~~。其实是摘要显示的行数不同的。广告是两行，文章摘要是一行。
当我做了下面的操作：将line-clamp 取消掉，就显示出完整的文本。 </div>
</body>
</html>
这里的省略号应呈现为 Unicode 字符 (U+2026)
不要滥用height
当容器高度大于内容高度，其他内容也会显示出来，当然省略号仍然在
div {
width: 300px;
height:300px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
当容器高度小于于内容高度。
div {
width: 300px;
height:20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
后记
截断文本的方式有很多，line-clamp胜在可以指定行数。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）