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);
}
相关推荐
Entropy-Lee20 分钟前
JavaScript 语句和函数
开发语言·前端·javascript
Wcowin1 小时前
MkDocs文档日期插件【推荐】
前端·mkdocs
xw52 小时前
免费的个人网站托管-Cloudflare
服务器·前端
网安Ruler2 小时前
Web开发-PHP应用&Cookie脆弱&Session固定&Token唯一&身份验证&数据库通讯
前端·数据库·网络安全·php·渗透·红队
!win !2 小时前
免费的个人网站托管-Cloudflare
服务器·前端·开发工具
饺子不放糖2 小时前
基于BroadcastChannel的前端多标签页同步方案:让用户体验更一致
前端
饺子不放糖2 小时前
前端性能优化实战:从页面加载到交互响应的全链路优化
前端
Jackson__2 小时前
使用 ICE PKG 开发并发布支持多场景引用的 NPM 包
前端
饺子不放糖2 小时前
前端错误监控与异常处理:构建健壮的Web应用
前端
cos2 小时前
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
前端·javascript·css