elementui table在safari浏览器用了超过两行省略号样式错乱

最新推荐文章于 2023-12-22 16:55:29 发布

Peak peak

最新推荐文章于 2023-12-22 16:55:29 发布

阅读量581

点赞数

本文链接：https://blog.csdn.net/qq_38299934/article/details/129139001

版权

elementui 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

文章讨论了在CSS样式中，当试图限制文本显示为两行并启用省略号时，由于line-clamp属性未生效导致的高度撑开问题。解决方案是添加line-height和max-height属性，以正确控制文本区域的高度并确保省略属性正常工作。

摘要由CSDN通过智能技术生成

这个问题是因为计算的时候，超出两行省略的属性没生效，撑开了高度

.text-ellipsis-2 {
  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  word-break: break-all;
 
}

修改一下css就可以

.text-ellipsis-2 {
  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  word-break: break-all;
  
  line-height: 23px;
  
  max-height: 46px;
}