css文本溢出裁剪

最新推荐文章于 2024-09-13 23:30:23 发布

问问那只猫

最新推荐文章于 2024-09-13 23:30:23 发布

阅读量3.2k

点赞数

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

本文为博主原创文章，转载请注明本文链接。 https://home.cloudn.me/aff.php?aff=11525&gid=11

本文链接：https://blog.csdn.net/sunny_desmond/article/details/80017862

版权

web 前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

单行文本超出

<p class="single">
        我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多
        我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多
</p>

.single {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border: 1px solid lightcoral;
        }

如图：
这里写图片描述

多行文本超出

 <p class="multy">
        我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多我的内容好多好多
 </p>

.multy {
            display: -webkit-box;
            -webkit-line-clamp: 3;  //需要裁剪的行数
            -webkit-box-orient: vertical;
            overflow: hidden;
            border: 1px solid lightslategray;
        }