关于文本设置overflow:hidden后引起的垂直对齐问题
2024-08-22 07:35:44
目前有这样的需求,一行标题中,前面为图标,后面是文字,文字要实现一行省略的效果
首先把文字设为:display: inline-block;
然后设置省略: overflow: hidden; word-wrap: normal; white-space: nowrap; text-overflow: ellipsis;
这时我们会发现,文字省略实现了,但是文字和图标不对齐了,如下
这是因为行内元素默认的是基线对齐vertical-align: baseline,设置overflow: hidden后会使它的基线变为下边缘,而其他元素为了对齐,就会向下偏移
解决方案:
1. 设置文字vertical-align: top
2. 给一行中的其他元素也设置overflow: hidden
3. 设置元素float
最新文章
- mvc正则@符号js报错解决办法
- mybatis 小于号 转义
- ruby中字符的转换
- windbg 命令 gchandles
- Intel指令集专有词解释
- How to setup and process Intercompany accounting [AX2012]
- C# 浅拷贝与深拷贝
- LeetCode Letter Combinations of a Phone Number 电话号码组合
- [改善Java代码]多线程使用Vector或HashTable
- Indy10 即时通讯Demo
- Error while registering Oracle JDBC Diagnosabilityh
- key-value存储Redis
- Kubernetes(k8s)1.12.2集群搭建
- 工程启动没有报错,但是dubbo后台显示没有提供者,工程没有提供服务
- APP-12-视觉技术-身份证识别
- android 蓝牙编程重点---如何发送和接收16进制数据
- 使用 SendARP 获取 MAC 地址(使用SendARP API函数,很多相关文章)
- 微信小程序云开发
- VC++编写ActiveX控件
- ActiveMQ搭建