我们都知道单行文本溢出加省略号的方法,很简单,代码如下所示:

.line-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

那么多行文本溢出也想要加省略号怎么实现呢?对于 webkit 内核的浏览器也可以很简单的实现:

.multiline-ellipsis {
    display: block; /* 用于非 webkit 内核的浏览器 */
    display: -webkit-box;
    max-width: 400px;
    height: 45px; /* 用于非 webkit 内核的浏览器 */
    font-size: 16px;
    line-height: 1.4;
    -webkit-line-clamp: 2; /* 限制文本行数为 2 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

height 设置的值为 font-size * line-height * lines-to-show 使得非 webkit 内核的浏览器也能正常的显示文本,lines-to-show 是你想要显示的文本行数,即 -webkit-line-clamp 的值。

效果如下所示:

前端日志网专注于前端开发和 Node.js 开发,是一个致力于分享 JavaScript 开发技术、CSS 开发技术等前端开发技术和 Node.js 开发技术的网站。