行截断后保持编辑按钮可见的前端问题求助

核心思路 #

把编辑按钮从-webkit-box的截断容器中剥离，通过绝对定位固定在容器角落，避免被overflow:hidden隐藏，同时保留hover触发显示的逻辑。

修改后的HTML代码 #

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

修改后的CSS代码 #

.edit-btn {
  display: none;
  /* 绝对定位到容器右下角 */
  position: absolute;
  right: 4px;
  bottom: 4px;
  /* 提升层级避免被文本遮挡 */
  z-index: 1;
}

.cat-name {
  /* 设置相对定位，作为按钮绝对定位的参考容器 */
  position: relative;
  /* 保留原有的文本截断样式 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 给按钮预留右侧空间，避免覆盖文本最后一行 */
  padding-right: 32px;
}

.cat-name-text {
  display: block;
  width: 100%;
}

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

关键修改说明 #

1. 拆分文本与按钮：把分类名称单独放入<span>，避免按钮被包含在-webkit-box的排版流中，防止被截断隐藏。
2. 绝对定位按钮：利用position:absolute让按钮脱离文本容器的截断范围，固定在容器右下角，不受文本长度影响。
3. 预留右侧内边距：给.cat-name添加padding-right，确保按钮不会覆盖文本最后一行的内容，提升可读性。
4. 层级控制：给按钮加z-index，避免被文本或其他元素遮挡。

内容的提问来源于stack exchange，提问作者Adan Sandoval