css 线夹后有内容显示

pbwdgjma  于 2023-08-08  发布在  其他
关注(0)|答案(2)|浏览(138)

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

  1. display: -webkit-box;
  2. -webkit-line-clamp: 4;

字符串
它将内容夹在文本的第4行之后,因此隐藏了按钮。
我想要的是一种方法,即使在线被夹住后,按钮仍然可见,因此用户可以编辑长文本。
为了清楚起见,这里是目前为止的HTML代码

  1. <div class="cat-name">
  2. {{ category.name }}
  3. <button
  4. mat-icon-button
  5. class="edit-btn"
  6. (click)="category.isEditing = true"
  7. >
  8. <mat-icon>edit</mat-icon>
  9. </button>
  10. </div>


还有Css

  1. .edit-btn {
  2. display: none;
  3. }
  4. .cat-name {
  5. display: -webkit-box;
  6. -webkit-line-clamp: 4;
  7. -webkit-box-orient: vertical;
  8. overflow: hidden;
  9. &:hover {
  10. .edit-btn {
  11. display: inline-block;
  12. }
  13. }
  14. }


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



我希望我说的很清楚,谢谢大家的帮助!

z9zf31ra

z9zf31ra1#

您可以将div.cat-name之外的按钮设置为不被线夹隐藏,并且使用下一个同级选择器(+)仍然在.cat-name悬停上显示按钮。
请看一个工作示例:

  1. .edit-btn {
  2. display: none;
  3. }
  4. .cat-name {
  5. display: -webkit-box;
  6. -webkit-line-clamp: 4;
  7. -webkit-box-orient: vertical;
  8. overflow: hidden;
  9. }
  10. .cat-name:hover + .edit-btn,
  11. .edit-btn:hover {
  12. display: inline-block;
  13. }

个字符

展开查看全部
cuxqih21

cuxqih212#

创建wrapper:

  1. .cat-name-wrapp {
  2. --font-size: 16px;
  3. --line-height: 1.4;
  4. font-size: var(--font-size);
  5. line-height: var(--line-height);
  6. position: relative;
  7. width: 320px;
  8. }
  9. .cat-name {
  10. display: -webkit-box;
  11. -webkit-line-clamp: 4;
  12. -webkit-box-orient: vertical;
  13. overflow: hidden;
  14. }
  15. .cat-name-edit-btn {
  16. --size: 40px;
  17. position: absolute;
  18. width: var(--size);
  19. height: var(--size);
  20. border-radius: 50%;
  21. font-size: 12px;
  22. top: calc(100% - calc(var(--size) / 2) - var(--font-size) * var(--line-height) / 2);
  23. right: 0;
  24. opacity: 0;
  25. transition: opacity .4s;
  26. pointer-events: none;
  27. cursor: pointer;
  28. }
  29. .cat-name-wrapp:hover .cat-name-edit-btn {
  30. opacity: 1;
  31. pointer-events: auto;
  32. }

个字符

展开查看全部

相关问题