如何优雅地处理文本超出2行显示省略号 | 技巧分享

在网页开发中，我们常常需要对文本进行限制，以保证用户界面的美观性和良好的用户体验。如果文本内容过长，不做处理的话，会让页面显示效果变得非常的杂乱无章。本文将会介绍一些优雅处理文本超出2行显示省略号的技巧。

一、CSS属性

第一种处理方式是使用CSS属性处理。CSS3中的text-overflow属性，可以将显示超出文本框的文本省略掉。text-overflow属性一般结合white-space:nowrap和overflow:hidden一起使用。white-space:nowrap可以防止文本在到达容器结尾时换行，overflow:hidden则使得超出容器的内容被隐藏掉，只显示省略号。

.text-container {
    width: 300px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

二、JavaScript方法

第二种处理方式是使用JavaScript来实现。使用JavaScript实现时，需要先计算出文本的高度，如果文本超出两行，则截取文本并加上省略号。这里需要用到offsetHeight和scrollHeight这两个属性。offsetHeight返回的是元素的像素高度，包含padding和border的高度；scrollHeight返回的是元素的实际内容高度。

function setText(container, text) {
    container.innerHTML = text;
    if(container.offsetHeight > 40) {
        var maxLines = 2;
        var lineHeight = parseInt(getComputedStyle(container).lineHeight);
        var overflowHeight = container.offsetHeight - (lineHeight * maxLines);
        var index = Math.floor((text.length * overflowHeight) / container.scrollHeight);
        container.innerHTML = text.slice(0, index) + '...';
    }
}

三、jQuery插件

第三种方式是使用jQuery插件实现。jQuery插件有很多，其中比较常用的是dotdotdot.js。dotdotdot.js是一个轻量级、基于jQuery的插件，其可以在文本超出预设高度时将文本截取并添加省略号。

$(".text-container").dotdotdot({
    height: 40,
    watch: true
});

四、结论

处理文本超出2行显示省略号，有多种方法可供选择。CSS属性是最简单、最常用的一种方法，而JavaScript方法适用于动态生成的文本，可以更加灵活地控制文本截取。如果使用jQuery，可以直接使用dotdotdot.js来实现文本截取。不同的处理方式适用于不同的场景，根据实际情况选择最合适的一种方法即可。