UNI-APP 溢出隐藏显示省略号

✍经常在项目里面使用到,又没有记住懒得找了,故此写一篇记录一下!

CSS单行显示省略号

css 复制代码
/* CSS样式 */
.ellipsis {
  overflow: hidden;       /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap;     /* 不换行 */
}

CSS多行显示省略号

css 复制代码
overflow: hidden;  /* 隐藏超出的内容 */
word-break: break-all; /* break-all(允许在单词内换行。) */
text-overflow: ellipsis; /* 超出部分省略号 */
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 1; /** 显示的行数 **/

在 SCSS与LESS中,定义一个混合器(mixin)使用

css 复制代码
@mixin ellipsis($lines: 1) {
  overflow: hidden;
  word-break: break-all; /* 允许在单词内换行 */
  text-overflow: ellipsis; /* 超出部分省略号 */
  display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
  -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-line-clamp: $lines; /* 显示的行数 */
}

/* 使用 mixin */
.ellipsis-one-line {
  @include ellipsis(1);
}

.ellipsis-two-lines {
  @include ellipsis(2);
}
相关推荐
excel3 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着3 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友5 小时前
什么是API签名?
前端·后端·安全
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_7 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23338 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin8 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js