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

Html – Multi-line Truncated Text with "…" in the end

I need help with Multi-line Truncated Text. I can’t cut the final word with "…" in text block with randon string number

So this is my solution which cut the end of my block, but without "…"

      <ul className="note__tags">
        {tags.map((item) => (
          <li className="note__tag-item">{item}</li>
        ))}
      </ul>

 &__text {
    @include manrope-15($size: 15px, $weight: 500, $color: $grey-blue);
    width: 270px;
    max-height: 192px;
    overflow: hidden;
    white-space: wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    position: relative;
}

And i tried somthing like this, but it look’s like strange and not flexible.

 &__text {
    @include manrope-15($size: 15px, $weight: 500, $color: $grey-blue);
    width: 270px;
    max-height: 192px;
    overflow: hidden;
    white-space: wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    position: relative;

    &::after {
      content:"...";
      position: absolute;
      bottom: 0;
      right: 40px;
      color: black;
    }
}
Tags:

2

Answers


  1. 0

    Try this:

    .content {
  width: 12rem;
  border: 1px solid red;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
    <div class="content line-clamp-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea tempore repellendus ut consequatur dolorem ducimus.</div>

    You can change the number of lines displayed with -webkit-line-clamp: <integer [1,∞]>.

    Login or Signup to reply.
  2. 0

    Achieve a multi-line truncated text effect with ellipsis at the end, you can use the CSS -webkit-line-clamp property along with the -webkit-box display model.

    .line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
    <div class="line-clamp" style="--line-clamp: 3;">
  This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end. This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.This is a long paragraph that will be clamped after three lines of text, showing ellipsis at the end.
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search