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;

相关推荐
How_doyou_do18 分钟前
样式冲突修复组件
前端·javascript·html
IT_陈寒21 分钟前
SpringBoot实战:这5个高效开发技巧让我节省了50%编码时间!
前端·人工智能·后端
isixe22 分钟前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
蓝莓味的口香糖27 分钟前
【npm】npm命令大全
前端·npm·node.js
我是天龙_绍28 分钟前
uniapp一个关于自定义导航栏高度计算的问题
前端
彭一29 分钟前
uniapp评论弹窗
前端
**之火33 分钟前
中止 Web 请求新方式 - AbortController API
开发语言·前端·javascript
我有一棵树1 小时前
如何优雅的布局,height: 100% 的使用和 flex-grow: 1 的 min-height 陷阱
前端·css·html
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互
石小石Orz1 小时前
思考许久,我还是提交了离职申请
前端