CSS实现文本超过部分，超出两行，超出部分省略号显示

最新推荐文章于 2024-05-14 18:01:48 发布

小白style

最新推荐文章于 2024-05-14 18:01:48 发布

阅读量1.9w

点赞数 11

分类专栏： HTML&CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_43076899/article/details/88565619

版权

HTML&CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文字超过部分显示为省略号

<style>
.p{
    display: block;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

文本超出两行，超出部分省略号显示


<style>
.p{
    width: 200px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    overflow: hidden;
}
</style>
<body>
    <p class="p">
        我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本我是一个文本
    </p>
</body>

小白style

关注

11
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
CSS实现文本超过部分，超出两行，超出部分省略号显示

文字超过部分显示为省略号&lt;style&gt;.p{ width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}&lt;/style&gt;&lt;body&gt; &lt;p class="p"&gt; 我是一个文本我是一...
复制链接

扫一扫