CSS 多行省略

一个多行省略需求

文字默认多行展示，当超过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;
}

下挤文字

得到了行数也就得到了是否显示...更多的控制权，再看显示更多问题。直接遮盖会导致遮盖不全，达到挤出文字的效果就该浮动了。只要设定...更多浮动到指定位置即可。利用一个右浮动元素占位，将...更多右浮动同时清除右浮动即可定位。得到示例

结合应用

借助js手动检测，在js设置textContent后，如果不嵌套子标签，则直接调用getClientRects判定是否过长，动态添加过长省略类，在过长省略类里定义相应样式，示例
借助js手动检测，在js设置textContent后，如果嵌套子标签，则调调用getRowRects判断是否过长，动态添加过长省略类，在过长省略类里定义相应样式，示例
借助js动态检测，绑定一段多行省略js到一个选择器上，当有增删改符合选择器的元素时，自动处理，为适应子元素动态计算...更多位置，示例

原文标题：多行省略
原文链接：http://hai.li/2016/03/05/multiline-overflow-ellipsis.html
原文快照：https://web.archive.org/web/20210417090544/http://hai.li/2016/03/05/multiline-overflow-ellipsis.html