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

相关推荐
我血条子呢几秒前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 分钟前
前端第二次作业
前端·css·css3
啦啦右一3 分钟前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落7 分钟前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v35 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我36 分钟前
浏览器交互事件汇总
前端·交互
YBN娜1 小时前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=1 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck1 小时前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js