需求
产品： 这个表格的某个字段限宽 200px，显示两行，多余的用...显示，能不能做？
苦逼程序员： 能...吧...
动手！
最简单的...
那必然是直接限宽，然后用overflow，text-overflow等样式搞定！
<div class="ellipsis-box div-box">{{ title }}</div>
<span class="ellipsis-box span-box">{{ title }}</span>
// 数据
title: 'And Ill be waiting in the shadow of the sun.而我会在暗淡的光影里静默守候Seizing time where no one has been before在没有人到达之前抓住时间。Close the curtains what are you waiting for?合上窗帘而你又在等着什么？And Ill be keeping secrets till Im in the ground.而我会永生保守这些秘密'
// 样式
.ellipsis-box{
// display: inline-block; // span标签需要用到或者设置为block也可以
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
原本
加了buff后
但是如何显示两行后，多余的再用...显示？
.ellipsis-box{
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: normal;
// 这部分
display: -webkit-box;
// 这个属性不是css的规范属性
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
buff提升，完成需求 ^V^
但是有时候会出现异常情况， 请看下面的文章解决哈哈哈哈
