Question 225238 in Html Question posted in
Some basic documentation can be found here.

Html – Have content display after line clamp

I am working on a simple edit button that floats at the end of a paragraph, it’s hidden unless the user hovers over the text, clicking the button sets a variable that enables edit mode, works as expected up until this point.
Problem comes because for that very paragraph Im using

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

Which clamps the content after 4th line of text and therefore hides the button.

What I would like is a way for the button to remain visible even after the lines have been clamped, So the user can edit long texts.

For clarity here’s the html code as of right now

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

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

And to add even more clarity some images:
This is a shorter text and its working as expected

Working as expected on shorter texts

And this is a longer, clamped text and as you can see the button cannot be seen because it’s hidden after the ellipsis

enter image description here

I hope I made myself clear, thanks everybody for the help!

Tags:

2

Answers


  1. 0

    You could set the button outside your div.cat-name to not be hidden by the line-clamp, and using the next sibling selector ( + ) to still show your button on .cat-name hover.

    See a working example:

    .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>
    Login or Signup to reply.
  2. 0

    Just create 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;
}
    <div class="cat-name-wrapp">
  <div class="cat-name">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, a, facilis, dolor, voluptatum ad iste corporis enim labore sapiente fugit animi eius nemo doloremque eveniet culpa inventore aliquam! Doloribus, voluptate adipisci dicta odio eius atque harum maxime. Sed, praesentium, ea minus corporis nihil animi consequuntur omnis labore! Ab, eveniet, molestiae!
  </div>
  <button class="cat-name-edit-btn">Edit</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search