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

相关推荐
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
七夜zippoe1 小时前
前端开发中的难题及解决方案
前端·问题
Hockor2 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军2 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到112 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡2 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu2 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂2 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军2 小时前
React 实现多个节点 diff
前端·react.js·前端框架