问题描述
我想实现的效果是当前div的文本内容超过2行时，用...来代替剩余未显示的部分
矛盾点
网上介绍了一种很二B实现多行文本溢出的方法，虽然很二，还是决定试一试
.test {
background-color: red;
width: 60px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
我在纯的html文件中测试过，ok，是没有问题的，但在项目中却不能实现，后面没有....显示
问题解决
Q1:为什么会没有显示？
A1:打开浏览器的控制台，发现浏览器根本就没有识别到属性-webkit-box-orient: vertical;
为什么会识别不到这个属性呢？
- 首先这个方法可以在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面，我用的是chrome浏览器，所以它是实现的
-
-webkit-line-clamp：2用来限制在一个块元素显示的文本的行数为2,它常见结合属性：- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
- text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本
Q2: 怀疑是浏览器缓存的原因？
A2:手动清除了浏览器的缓存不行，又手动重新打包，然后重新集成到后端，还是不行。
Q3: 这个属性不能被浏览器识别，我查看了打包后的css代码，果然打包后的代码中是没有这个属性的，现在就有两种可能：
- 用create-react-app 创建的项目中不能打包
-webkit-box-orient: vertical;这个属性，项目框架本省的问题。 - 用ant-design 后，Ant-design 内部的某个属性将这个属性给覆盖了
A3:本地重新用create-react-app 创建了一个项目进行尝试，没有引入库ant-design，结果发现在html中ok的但在这里仍旧不行。好了，找到问题了是在这里。网上搜索，在这里找到了答案
Q4:前面说这是一个二B 的方法，为什么呢？
A4: 首先使用的属性是-webkit-line-clamp；注意：这是一个 不规范的属性，它没有出现在 CSS 规范草案中。再者，它存在浏览器的兼容性问题.这种方式可能是更靠谱点的方法：
.test {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
.test::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}
反思
开始遇到这个问题的时候，网上各种搜索，结果都搜索不到，折腾了好久都没有解决。最后，跳过了这个问题，用js的方法解决了我的问题。过了一天，回过头来再来啃这个问题，用create-react-app 写demo尝试，才发现了问题，根据问题才搜索到原因。
action
- 找原因，如果不能确定，不妨各种尝试，写demo去发现和证明
- 搜索，不知道原因漫无目的的搜索不过是浪费时间而已。
- 给自己限定解决问题的时间，如果一个小时还是没有任何的头绪，暂时放弃，换个时间再来看这个问题，说不定会有新的思路。
