CSS中overflow:hidden导致元素高度增加的问题
先看如下CSS代码:
display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
使用 overflow: hidden 会导致元素的高度增加,去掉 overflow: hidden 后不能实现省略号
原因是 overflow:hidden 和 display: inline-block 一起使用时会造成baseline的移动
只需给元素添加 vertical-align: bottom; 就可以解决该问题
完整的CSS代码如下:
display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: bottom;
我的笔记