纯css的文字溢出显示省略号

原创于 2020-04-05 23:28:58 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的效果，通过white-space、text-overflow和overflow属性控制文本布局。

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

单行文本溢出显示省略号

<p class="content">
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
        这是一个demo
</p>

	.content {
        width: 500px;
        /* 控制文字不换行 */
       	white-space: nowrap;
       	/* 文字溢出以省略号显示 */
        text-overflow: ellipsis;
        /* 溢出隐藏 */
        overflow: hidden;
    }

单行文本溢出隐藏效果图
在这里插入图片描述

多行文本溢出显示省略号

	.content {
            width: 500px;
            
            display: -webkit-box;
            /* 指定多少行 */
            -webkit-line-clamp: 2; 
            -webkit-box-orient: vertical;
            overflow: hidden;
        }