CSS 文字超出变为省略号

1.单行文本溢出显示符号--必须满足三个条件

width: 100px

先强制一行内显示文本

white-space:nowrap; (默认 normal 自动换行)

超出的部分隐藏

overflow:hidden;

文字用省略号代替超出的部分

text-overflow:ellipsis;

2.多行文本溢出显示省略号
  • width: 100px

  • overflow:hidden;

  • text-overflow:ellipsis;

  • 弹性伸缩盒子模型显示

  • display: -webkit-box;

  • 限制在一个块元素的文本的行数

  • -webkit-line-clamp:2;

  • 设置或检索伸缩盒对象的子元素的排列方式

  • -webkit-box-orient: vertical;

相关推荐
Hilaku几秒前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明3 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
睡不着先生9 分钟前
CSS `@scope` 实战指南:开启局部样式隔离新时代
css
Danny_FD17 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip21 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济27 分钟前
后端程序员的CSS复习
前端
Enddme30 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员31 分钟前
微信小程序使用 Tailwind CSS version 3
前端
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427111 小时前
Canvas之图像合成
前端·javascript·canvas