Learn how to add ellipsis in the text after 1 or any number of lines of text using CSS for better content readability and design. This guide covers simple CSS techniques to handle text overflow efficiently.

How to Add Ellipsis After 1 Line Using CSS

HTML

<div class="ellipsis-one-line">
  This is an example of a single line ellipsis effect using CSS.
</div>

CSS

.ellipsis-one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Browser Support

• The single-line ellipsis method is widely supported across all modern browsers.

How to Add Ellipsis After Multiple Lines Using CSS

HTML

<div class="ellipsis-multi-lines">
  This is an example of a three-line ellipsis effect using CSS. In this example, the text will be truncated after three lines with an ellipsis at the end to indicate that there is more content available. This technique is useful for managing overflow text in multi-line containers, helping to maintain a clean and organized layout on your website. By applying these CSS properties, you can enhance readability while ensuring that excess text does not disrupt the visual flow of your design. This approach is especially useful for articles, blog posts, and content-heavy pages where space is a consideration.
</div>

CSS

.ellipsis-multi-lines {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Specifies the number of lines to show */
  -webkit-box-orient: vertical; /* Sets the orientation to vertical */
  overflow: hidden;
  text-overflow: ellipsis;
}

Browser Support

• The multi-line ellipsis method using -webkit-line-clamp is primarily supported by WebKit-based browsers like Chrome, Safari, and the newer versions of Edge.

Explanation

Resources

• -webkit-prefixed CSS extensions
• line-clamp
• CSS text-overflow Property