display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

overflow: hidden 会导致元素的高度增加,去掉 overflow: hidden 后又不能实现省略号

原因是overflow:hidden和display: inline-block一起使用时会造成baseline的移动

只需给元素添加 vertical-align: bottom; 即可解决该问题

最终的元素样式

display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: bottom;

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-24
  • 2021-08-23
  • 2021-10-14
  • 2021-08-09
  • 2022-12-23
猜你喜欢
  • 2022-01-03
  • 2022-01-30
  • 2021-12-21
  • 2021-06-24
  • 2022-12-23
  • 2021-11-05
  • 2021-07-03
相关资源
相似解决方案