css 线夹后有内容显示

pbwdgjma 于 2023-08-08 发布在其他

关注(0)|答案(2)|浏览(111)

我正在开发一个简单的编辑按钮，它浮在段落的末尾，除非用户将鼠标悬停在文本上，否则它是隐藏的，单击按钮会设置一个启用编辑模式的变量，直到这一点为止，它都能正常工作。问题来了，因为我用的就是那个段落

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;
    }
  }
}

型
为了增加更多的清晰度，一些图片：这是一个较短的文本和它的工作预期
x1c 0d1x的数据
这是一个较长的，被夹住的文本，正如你所看到的，按钮是看不到的，因为它隐藏在省略号后面

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

css

来源：https://stackoverflow.com/questions/76853983/have-content-display-after-line-clamp

2条答案

按热度按时间

z9zf31ra1#

您可以将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;
}

个字符

赞(0）回复(0）举报 2023-08-08

cuxqih212#

创建wrapper：

.cat-name-wrapp {
  --font-size: 16px;
  --line-height: 1.4;
  font-size: var(--font-size);
  line-height: var(--line-height);
  position: relative;
  width: 320px;
}

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

.cat-name-edit-btn {
  --size: 40px;
  position: absolute;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  font-size: 12px;
  top: calc(100% - calc(var(--size) / 2) - var(--font-size) * var(--line-height) / 2);
  right: 0;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  cursor: pointer;
}

.cat-name-wrapp:hover .cat-name-edit-btn {
  opacity: 1;
  pointer-events: auto;
}

个字符

赞(0）回复(0）举报 2023-08-08

我来回答

css 线夹后有内容显示

2条答案

相关问题

热门标签

最新问答