base/wen/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本溢出</title>
    <style>
        .wen {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /* 这个是多余的代码 */
            width: 80px;
        }

        .two {
            -webkit-line-clamp: 2; /*（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果，它需要组合其他的WebKit属性）*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* 公共代码 */
            overflow: hidden;
            /* 多余的代码 */
            width: 80px;
        }
    </style>
</head>

<body>
    <div class="wen">
        单行文本溢出（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）
    </div>
    <br />
    <div class="two">
        多行文本溢出（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）（文字长度超出限定宽度，则隐藏超出的内容）
    </div>
</body>

</html>