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);
}
相关推荐
夏河始溢4 分钟前
一七八、Node.js PM2使用介绍
前端·javascript·node.js·pm2
蜕变菜鸟5 分钟前
uni-app 实现自定义底部导航
uni-app·notepad++
记忆深处的声音5 分钟前
vue2 + Element-ui 二次封装 Table 组件,打造通用业务表格
前端·vue.js·代码规范
陈随易6 分钟前
兔小巢收费引发的论坛调研Node和Deno有感
前端·后端·程序员
熊的猫20 分钟前
webpack 核心模块 — loader & plugins
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
速盾cdn27 分钟前
速盾:vue的cdn是干嘛的?
服务器·前端·网络
四喜花露水1 小时前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
瑶琴AI前端2 小时前
uniapp实现H5和微信小程序获取当前位置(腾讯地图)
微信小程序·小程序·uni-app
web Rookie2 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript