多行文本溢出

问题描述

我想实现的效果是当前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去发现和证明
• 搜索，不知道原因漫无目的的搜索不过是浪费时间而已。
• 给自己限定解决问题的时间，如果一个小时还是没有任何的头绪，暂时放弃，换个时间再来看这个问题，说不定会有新的思路。