css文字超出元素省略,单行、多行省略

最新推荐文章于 2024-01-24 15:18:46 发布

琉璃瓦在这么

最新推荐文章于 2024-01-24 15:18:46 发布

阅读量224

点赞数

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

本文链接：https://blog.csdn.net/qq_53561431/article/details/128997061

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

通用CSS

 .box {
    width: 500px;
    border: 1px solid red;
    padding: 10px;
    line-height: 24px;
  }

1.单行省略

.singe-line {
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
  }

 <p>单行省略</p>
  <div class="singe-line box" :title="content">
    {{ content }}
  </div>
复制代码
2.两行省略
.double-line {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  <p>两行省略</p>
  <div class="box">
    <div class="double-line" :title="content2">
      {{ content2 }}
    </div>
  </div>

3.超过元素宽高省略
需要设置元素宽度与高度,根据高度看下最多能放几行,再设置-webkit-line-clamp的值为最大行数

.over-line {
    height: 65px;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  <p>超过元素宽高省略</p>
  <div class="box">
    <div class="over-line" :title="content">
      {{ content }}
    </div>
  </div>