css Question posted in
Some basic documentation can be found here.

Css – How to add an inline element after a line-clamped element?

I’m having trouble figuring how to add an inline element by the end of a text block using a line-clamp. As I need to use display: -webkit-box, is it even possible ?

Example below

.line-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inline-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: red;
}
<p class="line-clamped">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<span class="inline-icon"></span>
Tags:

2

Answers


  1. 0

    You can add a container with relative positioning and place the icon to the right and bottom of that container.

    .container {
  position: relative;
}

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-right: 24px;
}

span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: red;
}
    <div class="container">
   <p>  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   <span></span>
</div>
    Login or Signup to reply.
  2. 0

    If you are trying to place a square after the line-clamp, you can use the after pseudo-element.

    MDN: It is often used to add cosmetic content to an element with the content property. It is inline by default.

    Also see position for more information on using relative and absolute and how they are used in positioning parent and child elements using these properties together.

    .line-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative; /* added this line: position relative */
}

/* after pseudo-element with position: absolute, set right and bottom to 0 */
.line-clamped::after {
  content: ''; /* content property is required */
  position: absolute; 
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: red;
}
    <p class="line-clamped">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search