css控制文字多余部分省略号显示

最新推荐文章于 2025-05-16 09:48:22 发布

一个认真学前端的人

最新推荐文章于 2025-05-16 09:48:22 发布

阅读量191

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lin_lin_zhao/article/details/115088939

本文介绍了如何使用CSS实现文字超出显示省略号的效果，包括单行显示和多行显示的解决方案。对于单行显示，通过设置`width`、`line-height`、`white-space`、`overflow`和`text-overflow`属性可以实现。对于多行显示，结合使用`-webkit-line-clamp`和`-webkit-box`系列属性可以限制显示的行数并添加省略号。

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

css控制文字多余部分省略号显示

HTML部分代码
  <body>
    <div class="text_box">
      Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
      Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
    </div>
  </body>
css代码
单行显示，多余文字显示省略号
.text_box{
        width:200px;
        border:1px solid #ccc;
        line-height: 40px;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow:ellipsis;
    }
    多行显示的时候,-webkit-line-clamp:2;指的是显示的行数
    .text_box{
        width:200px;
        border:1px solid #ccc;
        line-height: 40px;
        word-break:break-all;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        }