html - 通过 CSS 中的行数限制文本

Question

我有一个 textarea 框，它回显“bio”-“bio”是我数据库中的文本内容。

我在这个文本区域旁边还有一个 CSS 框，想知道如何将文本限制为三行，然后在CSS框下方继续。

这是一个图表：

_ _ _ _ _ _ _ _ _ _
|                  |   Bio Content Goes Here
|                  |   blah, blah, blah, blah     
- - - - - - - - - -    blah, blah, blah, blah  
Content carrys on here, here, here and here etc.
Content carrys on here, here, here and here etc.

Answer 1

你可以试试这个：

.yourBox {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: X;
    max-height: X*N
}

@media (-webkit-min-device-pixel-ratio: 0) {
    .yourBox {
        display: -webkit-box;
        -webkit-line-clamp: N; /* number of lines to show */
        -webkit-box-orient: vertical;
    }
}

来自重复的问题：使用 CSS 将文本长度限制为 n 行