Implementing Text Overflow and Show More/Less in HTML & CSS

I recently came across a use-case related to Text Overflow in CSS & i just thought to document it.

Lets understand the use case

I had to render text inside one of the HTML elements. The conditions were

1. I can show a maximum of three lines of text at a time.

2. Post 3 lines, i had to handle text overflow using ellipsis & a See More link. When See More was clicked, the entire text was shown along with See Less link. When See Less was clicked, we again had to show 3 lines & See More link.

HTML Structure

 <div id="container">
      <div id="label"><strong>Description</strong></div>
      <div id="content">
        <span id="text" class="text-clip"
          >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
          ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.
        </span>
        <a href="#" id="expand-link">See More</a>
      </div>
    </div>

How to set a limit on number of lines?

#content {
  max-width: 400px; /* Needed for overflow to take effect */
}
.text-clip {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines you want to display */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

How to know if See More option is needed?

If the text is more than 3 lines, only then the See More link was needed. So how to know if we’re exceeding 3 lines ? We’re already clipping overflow with ellipsis. So content would always be of 3 lines max.

I leveraged 2 awesome properties here - scrollHeight & offsetHeight

What’s scrollHeight?

The scrollHeight of an element is a property in JavaScript that represents the total height of the element's content, including the content that is not visible within the element's viewport due to overflow.

What’s offsetHeight?

The offsetHeight of an element is a property in JavaScript that represents the total height of the element, including its visible content, padding, and borders. It does not include margins or hidden content that is not visible within the element's container.

By reading the definition of these two properties, what i understood is if the text is overflowing, scrollHeight will be more that offsetHeight since its considering total height including overflowing content.

How to display See More or See Less?

const content = document.getElementById("content");
const text = document.getElementById("text");
const expandLink = document.getElementById("expand-link");

expandLink.addEventListener("click", (event) => {
  if (expandLink.textContent === "See More") {
    expandLink.textContent = "See Less";
    text.classList.remove("text-clip");
  } else {
    expandLink.textContent = "See More";
    text.classList.add("text-clip");
  }
});

// How to detect if text is overflowing / ellipsis are active?

if (text.scrollHeight > content?.offsetHeight) {
   expandLink.style.display = "block";
} else {
   expandLink.style.display = "none";
}

I’ve also attached a CodeSandbox Link incase you need to see full implementation.

Thanks for reading! Do let me know your thoughts / queries in the comments 😄