CSS设置文本超出显示省略号

最新推荐文章于 2025-06-24 09:47:52 发布

凉风听雪

最新推荐文章于 2025-06-24 09:47:52 发布

阅读量2.6k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： CSS炫酷使用文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/p_s_p/article/details/141184717

一、单行文本显示省略号

    <div class="box">
        <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
    </div>

    <style>
        .box p{
         width: 200px;
         display: block;
         text-align: center;
         overflow: hidden;
         text-overflow: ellipsis;  /* 超出宽度200px后显示省略号 */
         white-space: nowrap;  /* 限制不允许换行 */
        }
     </style>

二、限制行数显示省略号

    <div class="box">
        <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
    &l