css实现多行省略

最新推荐文章于 2025-03-24 00:47:58 发布

高桥靓仔

最新推荐文章于 2025-03-24 00:47:58 发布

阅读量608

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45221036/article/details/106336723

版权

本文介绍了四种CSS实现多行文本省略的方法，包括使用私有属性（有限制）、利用'…'文本结合定位、文字渐变模糊替代以及强制显示一行时的省略策略。详细讲解了每种方法的实现思路和应用技巧。

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

1】方式一：使用私有属性（有局限性）

这样实现很有局限性
在这里插入图片描述

<style type="text/css">
    p{
        border: 2px solid saddlebrown;
        height: 44px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
</style>
<body>
<p>哈哈哈哈哈哈哈哈哈哈或或或或或或
或或或或或或或或或或或或或或或或或
或或或或或或或或或或或或或或
时诵诗书所所所所所所所所所所所所所
所所所所所所所所所所所所所所所所所
所所所所所所所所所所所所所所
所所所所所所所所所所所所所所所</p>
</body>

2】使用’…‘文本，在这段文字最后设置一个和背景颜色一样的方块，自适应时遮挡住’…'文本来实现

使用before伪类，设置文本’…’，然后用子绝父相的定位，放在文本框的右下角
在这里插入图片描述
使用伪类after，设置一小方块是行内元素，固定它的水平位置，但是竖直方向跟随最后一行文本移动

<style type="text/css">
    p{
        border: 2px solid saddlebrown;
        height: 44px;
        overflow: hidden;
        position: relative;
        padding-right: 10px;
        text-align: justify;
    }
    p::before{
        content: '...';
        position: absolute;
        right: 0;
        bottom: 0;
    }
    p::after{
        content: '';
        background: white;
        width: 10px;
        height: 10px;
        position: absolute;
        display: inline;
        right: 1px;
        margin-top:10px ;
    }
</style>
<body>
<p>哈哈哈哈哈哈哈哈哈哈或或或或或或
或或或或或或或或或或或或或或或或或
或或或或或或或或或或或或或或少
时诵诗书所所所所所所所所所所所所所
所所所所所所所所所所所所所所所所所
所所所所所所所所所所所所所所
所所所所所所所所所所所所所所所</p>
</body>

3】把省略号用文字渐渐模糊来代替

渐渐模糊

<style type="text/css">
    p{
        border: 2px solid saddlebrown;
        height: 44px;
        overflow: hidden;
        position: relative;
        text-align: justify;
		}
    p::after{
        content: '';
        width: 20%;
        height: 20px;
        background: linear-gradient(to right,rgba(255,255,255,0),white 80%);
        position: absolute;
        display: inline;
        right: 0;
        bottom: 0;
        margin-bottom:0;
    }
</style>
<body>
<p>哈哈哈哈哈哈哈哈哈哈或或或或或或
或或或或或或或或或或或或或或或或或
或或或或或或或或或或或或或或少
时诵诗书所所所所所所所所所所所所所
所所所所所所所所所所所所所所所所所
所所所所所所所所所所所所所所
所所所所所所所所所所所所所所所</p>
</body>

4】强制只显示一行的情况下

只能显示一行

overflow:hidden—溢出：隐藏
text-overflow:ellipsis—文本-溢出：省略
white-space:nowrap—空格符：不换行（也就是一行显示完文字内容）

<style type="text/css">
    p{
        border: 2px solid saddlebrown;
        height: 44px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<body>
<p>哈哈哈哈哈哈哈哈哈哈或或或或或或
或或或或或或或或或或或或或或或或或
或或或或或或或或或或或或或或
时诵诗书所所所所所所所所所所所所所
所所所所所所所所所所所所所所所所所
所所所所所所所所所所所所所所
所所所所所所所所所所所所所所所</p>
</body>