夹线后有内容显示

Question

我正在开发一个浮动在段落末尾的简单编辑按钮，除非用户将鼠标悬停在文本上，否则它是隐藏的，单击按钮设置一个启用编辑模式的变量，直到此时为止按预期工作。 问题来了，因为对于那一段我正在使用

display: -webkit-box;
-webkit-line-clamp: 4;

这会限制第 4 行文本之后的内容，从而隐藏按钮。

我想要的是一种即使在线条被夹紧后按钮也保持可见的方法，这样用户就可以编辑长文本。

为了清楚起见，这里是目前的 html 代码

<div class="cat-name">
   {{ category.name }}
   <button
     mat-icon-button
     class="edit-btn"
     (click)="category.isEditing = true"
   >
     <mat-icon>edit</mat-icon>
   </button>
</div>

还有CSS

.edit-btn {
  display: none;
}

.cat-name {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;

  &:hover {
    .edit-btn {
      display: inline-block;
    }
  }
}

为了增加一些图像的清晰度： 这是一个较短的文本，其工作符合预期

这是一个较长的、夹紧的文本，正如您所看到的，按钮看不到，因为它隐藏在省略号之后

我希望我说清楚了，谢谢大家的帮助！

Answer 1

您可以将 div.cat-name 外部的按钮设置为不被线夹隐藏，并使用下一个同级选择器 ( + ) 仍然在 .cat-name 悬停时显示您的按钮。

查看工作示例：

.edit-btn {
  display: none;
}

.cat-name {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-name:hover + .edit-btn,
.edit-btn:hover {
  display: inline-block;
}

<div class="cat-name">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc metus dolor, aliquam id condimentum vitae, maximus eget urna. Aliquam rutrum dolor faucibus pretium bibendum. Curabitur id nibh ante. Nulla enim dolor, elementum vitae purus sed, ultricies euismod nulla. Praesent tempor libero sed ante vehicula, ut feugiat dui luctus. Nulla tincidunt mauris ac quam commodo, eget eleifend turpis laoreet. Fusce rutrum efficitur leo id tempor. Cras sodales risus ut purus finibus mollis. Aenean nec tincidunt elit, at pellentesque libero. Nunc interdum neque ac sem viverra porttitor et mattis nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae felis volutpat, suscipit leo sit amet, aliquet enim. Nulla velit dui, vulputate eget sollicitudin non, porttitor molestie ipsum. Cras varius purus sem, id tincidunt velit molestie at. Vestibulum malesuada, est luctus vulputate volutpat, libero lorem congue ligula, blandit ornare est lorem at risus. Donec eleifend diam vitae dolor dapibus dictum.
</div>

<button class="edit-btn">
     <mat-icon>edit</mat-icon>
</button>