css 只显示二行

问题描述：

在编写 CSS 样式时，如何限制文本内容只显示两行？

解决方法：

要限制文本内容只显示两行，可以使用 CSS 的文本溢出处理属性和行数属性。

首先，我们可以使用 CSS 的 text-overflow 属性将溢出的文本内容进行省略号显示。通过 text-overflow: ellipsis;，当文本内容超出容器大小时，将会自动在文本后面添加省略号。

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

然而，只使用 text-overflow: ellipsis; 属性并不能限制文本只显示两行，因为这只是在文本溢出时添加省略号，而不会截断文本内容。

为了限制文本内容只显示两行，我们可以结合使用 CSS 的 line-clamp 属性和 display: -webkit-box; 属性来实现。该方法只能在 Webkit 内核的浏览器上使用（如 Chrome, Safari等）。

    .two-line-text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

代码解释：

在上述代码中，我们使用了一个 .two-line-text 的 CSS 类来限制文本只显示两行。设置了 overflow: hidden; 使得超出容器大小的文本内容被隐藏且不可见，设置了 text-overflow: ellipsis; 来显示省略号。

接着，我们使用了 display: -webkit-box; 设置容器为块级容器，并使用 -webkit-line-clamp: 2; 来限制显示的行数为两行。同时，我们还使用了 -webkit-box-orient: vertical; 将文本进行垂直布局。

总结：

通过使用以上的 CSS 样式代码，我们可以轻松地限制文本内容只显示两行。其中，text-overflow: ellipsis; 属性用于在文本溢出时添加省略号，而 -webkit-line-clamp: 2; 属性和 display: -webkit-box; 属性联合使用则可以实现限制文本行数的效果。