单行和多行文本省略号如何实现

原创于 2021-08-12 19:19:23 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用CSS实现单行和多行文本的省略号效果。通过结合`white-space: nowrap`，`overflow: hidden`和`text-overflow: ellipsis`属性，可以轻松创建单行文本省略号。对于多行文本，利用`-webkit-line-clamp`和`-webkit-box-orient`属性可以限制显示的行数并添加省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单行文本省略号如何实现</title>
    <style>
        .box1 {
            width: 200px;
            height: 23px;
            margin: 100px auto;
            color: red;
            background-color: green;
            /* 强制文本一行显示 white-space: normal;默认文本自动换行*/
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /* 文本溢出省略号 */
            text-overflow: ellipsis;
        }

        .box2 {
            width: 200px;
            height: 45px;
            margin: 0 auto;
            color: red;
            background-color: green;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            /* 第二行开始省略，这个可以随意设置，第三行四行开始出现省略号都可以 */
            -webkit-line-clamp: 2;
            /* 溢出部分隐藏 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box1">墙角数枝梅，凌寒独自开。春江花月夜</div>
    <div class="box2">
        墙角数枝梅，凌寒独自开。春江花月夜墙角数枝梅，wa他
    </div>
</body>

</html>