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);
}
相关推荐
没有黑科技2 分钟前
基于web的音乐网站(Java+SpringBoot+Mysql)
java·前端·spring boot
前端初见12 分钟前
彻底搞懂前端环境变量使用和原理
前端
前端小胡兔15 分钟前
uniapp rpx兼容平板
uni-app
荔枝吖20 分钟前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗22 分钟前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
小王码农记24 分钟前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
大G哥31 分钟前
我用豆包MarsCode IDE 做了一个 CSS 权重小组件
前端·css
乐闻x36 分钟前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js
麻花20131 小时前
WPF里面的C1FlexGrid表格控件添加RadioButton单选
java·服务器·前端
理想不理想v1 小时前
【经典】webpack和vite的区别?
java·前端·javascript·vue.js·面试