Guoguo-notes
主页
常用笔记
vue笔记及周边生态
  • 团队协作及规范
  • 项目框架及架构
  • 飞码篇
  • Java
  • React笔记
GitHub
主页
常用笔记
vue笔记及周边生态
  • 团队协作及规范
  • 项目框架及架构
  • 飞码篇
  • Java
  • React笔记
GitHub
  • 常用笔记

    • 1. CSS笔记.md
    • 2. Echarts.md
    • 3. Git 代码管理.md
    • 4. Html 笔记.md
    • 5. TypeScript.md
    • 6. axios 请求拦截.md
    • 7. js常规.md
    • 8. npm.md
    • 9. sh 笔记.md
    • 10. valibot校验学习.md
    • 11. 云开发教程.md
    • 12. 公共API接口.md
    • 13. 小程序笔记.md
    • 14. 插件库.md
    • 15. 服务器.md
    • 16. 服务器部署教学.md
    • 17. 浏览器px to rem适配.md
    • 18. 登录逻辑.md
    • 19. 网站配色.md
    • 20. 跨域代理.md

省略号 - 单行

.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>

省略号 - 两行

.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>

超过元素宽高省略

需要设置元素宽度与高度,根据高度看下最多能放几行,再设置-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>

单行 多行 省略号 scss

/** @format */

@mixin multi-ellipsis($lines: 1) {
  display: -webkit-box;
  line-clamp: $lines;
  -webkit-line-clamp: $lines;
  text-overflow: ellipsis;
  word-break: break-all;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* autoprefixer: ignore next */
  box-orient: vertical;
}

@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}
Edit this page
Last Updated:
Contributors: 袁果锅
Next
2. Echarts.md