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);
}
相关推荐
江城开朗的豌豆1 分钟前
Vue的keep-alive缓存揭秘:多出来的生命周期怎么玩?
前端·javascript·vue.js
BoredWait1 分钟前
vite+vue-ts 如何在项目中实现多语言
前端·javascript
年纪轻轻就扛不住22 分钟前
keep-alive实现原理及Vue2/Vue3对比分析
前端·javascript·vue.js
这是个栗子27 分钟前
黑马头条-数据管理平台
前端·javascript·ajax
2501_9153738827 分钟前
如何在 Chrome 浏览器中保存从商店下载的扩展程序到本地
前端·chrome
赛博丁真Damon1 小时前
【VSCode插件】【p2p网络】为了硬写一个和MCP交互的日程表插件(Cursor/Trae),我学习了去中心化的libp2p
前端·cursor·trae
江城开朗的豌豆1 小时前
Vue的keep-alive魔法:让你的组件"假死"也能满血复活!
前端·javascript·vue.js
BillKu2 小时前
Vue3 + TypeScript 中 let data: any[] = [] 与 let data = [] 的区别
前端·javascript·typescript
GIS之路2 小时前
OpenLayers 调整标注样式
前端
爱吃肉的小鹿2 小时前
Vue 动态处理多个作用域插槽与透传机制深度解析
前端