文本溢出：省略号； 2 行 - CSS

简介

当文本内容过长时，我们往往需要对其进行省略处理。CSS提供了多种方式实现文本溢出的省略显示，其中最常用的方式是使用省略号。本文将介绍如何使用CSS实现文本的省略显示，并且仅显示 2 行内容。

实现方式

text-overflow: ellipsis

text-overflow是CSS中一个用于控制文本展示样式的属性。其可以用于省略文本，并显示省略号。

.ellipsis {
    white-space: nowrap;   /* 不换行 */
    overflow: hidden;      /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 省略号 */
}

这种方式只需要三行代码即可实现，但是只能控制行内元素的省略显示效果，并且无法控制省略的行数。

line-clamp

line-clamp是CSS中用于控制文本行数的属性，当文本内容超出指定行数时，将会被省略并添加省略号。但是该属性只能用于块级元素。

.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* 显示 2 行 */
    overflow: hidden;      /* 超出部分隐藏 */
}

这种方式可以控制文本行数，并且控制究竟需要显示几行，但是需要注意的是，该方式只支持webkit内核的浏览器。

两者结合使用

当需要同时控制文本行数和省略显示时，我们可以将上述两种方式进行结合使用。

.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* 显示 2 行 */
    white-space: normal;   /* 允许换行 */
    overflow: hidden;      /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 省略号 */
}

这种方式，既可以控制文本行数，又可以显示省略号。

结语

以上三种方式都可以实现文本的省略显示，并且该功能在实际开发中经常用到。在选择实现方式时，需要根据实际情况进行选择，选择最合适的方式。