记录CSS效果：将文本中超过指定行数的内容将多出内容隐藏被显示...

东小记

于 2021-06-18 20:00:12 发布

阅读量673

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_36436407/article/details/118032862

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

实现代码：

<style>
    .word {
        border:1px solid blue; // 方便测试观察效果
        width:50px; // 内容限制宽度,必须指定
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3; // 指定内容行数
        -webkit-box-orient: vertical;
    }
</style>
<div class="word">测试一下多出的内容隐藏并显示...</div>