多行文本截断多行文本截断功能：实现文本最多展示2行展示不下的缩略展示多行效果：单行效果：代码实现如下实现思路：

多行文本截断

功能：实现文本最多展示2行展示不下的缩略展示多行效果：

ScreenShot_多行场景.PNG

单行效果：

ScreenShot_单行场景.PNG

代码实现如下

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .outer {
                width: 40px;
                height: 40px;
                background-color: #bfa;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .inner {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                max-width: 24px;
                max-height: 32px;
                text-align: center;
                line-height: 16px;
                text-overflow: ellipsis;
                overflow: hidden;
                /* background-color: skyblue; */
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">通</div>
        </div>
    </body>
</html>

实现思路：使用**display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;**来实现多行文本截断效果

[参考链接](纯 CSS 实现多行文字截断 - 知乎)