CSS 中多行文字溢出后显示省略号

原创已于 2025-03-19 22:21:57 修改 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端开发 #CSS

于 2019-03-08 16:26:23 首次发布

CSS 专栏收录该内容

5 篇文章

订阅专栏

HTML如下：

<p class="book-description">
    入门.一本全世界无数人受益和家庭必备的心
    理自助图书，教你远离生活压力带来的焦虑. 
    入门.一本全世界无数人受益和家庭必备的心
    理自助图书，教你远离生活压力带来的焦虑. 
</p>

CSS如下:

.book-description{
    height:3.75rem;
    font-size:0.625rem;
    color:#8f8f8f;
    line-height:1.25rem;
    text-align: justify;

    /* 主要代码 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;

    /* 几行后显示省略号 */
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

最终效果