多行省略
一个多行省略需求
文字默认多行展示，当超过n行后，在第n行最后显示...更多，原有第三行...更多处的文字自动隐藏
简单有效line-clamp
首先的反应是-webkit-line-clamp，当只显示省略号，且在webkit内核的时候非常完美，css代码也相对容易理解：
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
经典总结
然而当要增加一个更多链接时就变得棘手了，-webkit-line-clamp是webkit的私有属性，且无法自定义省略时的...，css-tricks里进行了经典总结，里面提供了六种方法（哇！），来筛选一下：
- Weird WebKit Flexbox Way 就是
-webkit-line-clamp，简单，但不能自定义省略时的... - Fade Out Way 直接将省略显示的元素增加渐变背景色，遮挡在主文字想要的位置，在设计能妥协的情况下最佳
- Opera Overflow Way 这个只针对旧版Opera有效，忽略
- Clamp.js Way 这个通过js动态计算字符个数来判断文字省略时机，强依赖文字宽度，当中英文混排或者有子元素设置了边距就非常不准了，不推荐
- ftellipsis Way 这个和我的思路核心都是利用
Element.getClientRects获取客户矩形数组来处理，但强依赖手动设定px的line-height，且省略显示内容是动态插入的，需要改动js才能自定义，可参考 - TextOverflowClamp.js Way，这个思路比较特别，直接将多行变成多个单行来处理，无法自定义省略时的
...，忽略
getRowRects方案
计算行数
- 通过getClientRects获取客户矩形数组
- 然后计算不同
top不同的客户矩形数量就是行数 - 这里用客户矩形(client rect)而没用行框(line box)，内联框或者块级框，因为几者没有非常一致的对应，示例可以看出，容器内联，不管子元素内联还是块级，都可以通过判断
getClientRects返回的客户矩形数组的不同高度个数得到行数 - 进一步扩展为getRowRects，返回行矩形数组，每个行矩形区域包含该行所有客户矩形区域
function getRowRects(element) {
var rects = [],
clientRects = element.getClientRects(),
len = clientRects.length,
clientRect, top, rectsLen, rect, i;
for(i=0; i<len; i++) {
has = false;
rectsLen = rects.length;
clientRect = clientRects[i];
top = clientRect.top;
while(rectsLen--) {
rect = rects[rectsLen];
if (rect.top == top) {
has = true;
break;
}
}
if(has) {
rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
rect.width = rect.right - rect.left;
}
else {
rects.push({
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left,
width: clientRect.width,
height: clientRect.height
});
}
}
return rects;
}
下挤文字
得到了行数也就得到了是否显示...更多的控制权，再看显示更多问题。直接遮盖会导致遮盖不全，达到挤出文字的效果就该浮动了。只要设定...更多浮动到指定位置即可。利用一个右浮动元素占位，将...更多右浮动同时清除右浮动即可定位。得到示例