这篇博客总结了在移动端项目中遇到的多行文本溢出后使用省略号表示的需求。主要讨论了WebKit浏览器的CSS扩展属性，如`-webkit-line-clamp`和`-webkit-box-orient`，以及如何实现跨浏览器兼容的解决方案，包括设置相对定位的容器高度和利用伪元素`::after`来模拟省略号。同时提到了对IE浏览器的兼容性处理。
最近在做移动端的项目，遇到了多行文本溢出后用省略号表示的需求，之前一直是每次用到的时候就搜索，这次打算总结一下。
WebKit浏览器或移动端的页面
因为这次做的项目是要放在微信里的，所以一开始想到的便是WebKit的CSS扩展属性(WebKit是私有属性)
-webkit-line-clamp注：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：
display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。text-overflow: ellipsis;可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-sca
最低0.47元/天 解锁文章
扫一扫
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
