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

相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程