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);
}
相关推荐
lyc2333333 分钟前
鸿蒙界面镜像测试:让RTL布局「正反都好看」
前端
lyc2333334 分钟前
鸿蒙IPCKit:当远端进程「消失」时,如何优雅地「收拾残局」?
前端
我怎么能这么帅气4 分钟前
Node.js 多核战争:child_process vs cluster vs worker_threads 终极对决
前端·后端·node.js
市民中心的蟋蟀4 分钟前
第九章 案例 3 - Valtio 【下】
前端·javascript·react.js
麦当_5 分钟前
Vite 项目 Icon 解决方案
前端·javascript·vite
lyc2333339 分钟前
鸿蒙应用本地化:伪本地化测试的「照妖镜」法则
前端
工呈士12 分钟前
React 路由管理与动态路由配置
前端·react.js·面试
梁高强12 分钟前
一款更轻量、更自然,同时性能更强的前端框架
前端
darkb1rd13 分钟前
Client-Side Path Traversal 漏洞学习笔记
前端