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

最新推荐文章于 2023-10-09 15:03:14 发布

一个认真学前端的人

最新推荐文章于 2023-10-09 15:03:14 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/lin_lin_zhao/article/details/115088939

版权

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;
        }

一个认真学前端的人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css控制文字多余部分省略号显示

css控制文字多余部分省略号显示HTML部分代码 <body> <div class="text_box"> Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。 </div> </body>css代码单行显示，多余文字显示省略号.text_box{ width
复制链接

扫一扫