CSS 文字溢出省略号显示

1. 单行文本溢出显示省略号

需要满足三个条件,添加对应的代码:

(1)先强制一行内显示文本;

(2)超出的部分隐藏;

(3)文字用省略号来替代省略的部分;

html 复制代码
white-space: nowrap; (如果是 normal,则默认是自动换行)
overflow: hidden;  
text-overflow: ellipsis;

示例:

2.多行文本显示省略号(不推荐使用)

这个显示有较大兼容性问题, 适合于webKit浏览器或移动端(移动端大部分是webkit内核),添加如下的代码:

html 复制代码
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

示例:

更推荐让后台人员来做这个效果,因为后台人员可以设置显示多少个字,操作更简单。


参考:

16-单行文字溢出省略号显示_哔哩哔哩_bilibili

17-多行文字溢出省略号显示_哔哩哔哩_bilibili

相关推荐
美酒没故事°4 分钟前
npm源管理器:nrm
前端·npm·npm源
用户22152044278005 分钟前
vue3组件间的通讯方式
前端·vue.js
三十_A23 分钟前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
下位子31 分钟前
『AI 编程』用 Claude Code 从零到一开发全栈减脂追踪应用
前端·ai编程·claude
tyro曹仓舒31 分钟前
Vue单文件组件到底需不需要写name
前端·vue.js
用户479492835691531 分钟前
面试官:讲讲2FA 双因素认证原理
前端·后端·安全
乐影32 分钟前
TS 模板字符串类型:从基础到进阶的类型编程魔法
前端·typescript
龙在天33 分钟前
CSS 属性值的计算与过程
前端
云鹤_34 分钟前
【Amis源码阅读】组件注册方法远比预想的多!
前端·低代码
xinfei36 分钟前
ES6 新特性 从 ECMAScript 2015(ES6)到 ECMAScript 2025
前端