分类: web前端 | 标签: css

css文本过长显示省略号

发表于: 2020-12-27 09:48:28 | 字数统计: 267 | 阅读时长预计: 1分钟

css单行或者多行超出显示省略号

注意：父盒子要有宽度，不能是行内元素比如span,否则样式设置无效

单行文本过长显示省略号

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

单行文本过长显示省略号

.many-ellipsis{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;  /*3表示超出三行隐藏 */
    -webkit-box-orient: vertical;
}

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 200px;
            border: 1px solid deeppink;
            margin: 20px;
        }
        .single-ellipsis{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .many-ellipsis{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;  /*3表示超出三行隐藏 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <!-- 单行隐藏 -->
    <div class="box single-ellipsis">111111111asdfsdfsdfasdfdasfasdfasdfasdfdasf</div>
    <!-- 多行隐藏 -->
    <div class="box many-ellipsis">
        111111111asdfsdfsdfasdfdasfasdfasdfasdfdasf
        111111111asdfsdfsdfasdfdasfasdfasdfasdfdasf
        111111111asdfsdfsdfasdfdasfasdfasdfasdfdasf
        111111111asdfsdfsdfasdfdasfasdfasdfasdfdasf
        111111111asdfsdfsdfasdfdasfasdfasdfasdfdasf
        111111111asdfsdfsdfasdfdasfasdfasdfasdfdasf
    </div>
</body>
</html>

参考：CSS 文本超出隐藏

------ 本文结束，感谢您的阅读 ------

本文作者: 贺刘芳
本文链接: https://heliufang.github.io/posts/cc486f8/
版权声明: 本文采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。