An ellipsis is a punctuation mark consisting of three dots ( . . . ) used to indicate an intentional omission of a word, phrase, or sentence from a quotation or text, or to create a pause or trailing off in speech or writing.

If there's a block of text site of where space is a premium, by using an ellipses you can cleverly truncate the text and still preserving its meaning.

This way, you can convey your message effectively without cluttering your page.

As a developer, the first step in truncating text is to determine how many lines you want to display before cutting it off. By carefully selecting the appropriate number of lines to display, you can ensure that your content retains its meaning, encouraging your readers to click and explore more.

The good news is that if you only need to truncate your text on a single line, the CSS is relatively simple:

<div class="ellipsis">
   This text will be truncated with an ellipsis if it overflows its container.
<div>

.ellipsis {
   white-space: nowrap; /* prevent text from wrapping */
   overflow: hidden; /* hide overflowing text */
   text-overflow: ellipsis; /* display ellipsis to indicate truncated text */
}

However, if you wish to choose the number of lines before the clipping your text with an ellipses, the solution is less straightforward.

Solution:

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

-webkit-box property is a CSS property used as a value for display that allows you to create a “flexible box” layout for HTML elements. Applying this property to a parent element allows for flexible sizing and positioning of its contents. It will essentially allow the other -webkit properties to work.

-webkit-line-clamp is used to limit the number of lines of text displayed within an element, and to add an ellipsis at the end of the last visible line. In the example above, it is set to 2, which limits the display to two lines.

-webkit-box-orient property is set to "vertical" to ensure that the text is displayed vertically within the box, and the overflow property is set to "hidden" to hide any text that exceeds the box.

Finally, the text-overflow property is set to "ellipsis" to append an ellipsis to the end of the last visible line.

Now, here's the caveat. The properties prefixed with -webkit will only work on browsers that are powered by WebKit, fortunately this include most modern browsers except Internet Explore. WebKit is the tech that interprets HTML, CSS, and JavaScript code and to display web pages on a user's screen. Fortunately, Internet Explorer constitutes an ever smaller browser market share (>2% in 2023) and the worse that will happen is that these properties will simply not work on Explorer - and not break a site! I'd opt for this solution over JavaScript, as I don't think it's worth the time/effort of coding an algorithm and function. These are the justifications I'd give my designer if such a requirement is on the mock up. An ellipsis is a punctuation mark consisting of three dots ( . . . ) used to indicate an intentional omission of a word, phrase, or sentence from a quotation or text, or to create a pause or trailing off in speech or writing.

If you're struggling to find enough space on your website to display all the necessary text, by using an ellipsis, you can cleverly truncate a block of text while still preserving its meaning.

This way, you can convey your message effectively without cluttering your page.

However, adding an ellipses in CSS is not as straightforward as you'd expect and comes with some caveats.

The challenge of adding an ellipsis after multiline text can be broken down into two parts:

  1. Detecting when the text needs to be truncated
  2. Adding the ellipsis in a visually appealing way

Solution

.title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

-webkit-box property is a CSS property that allows you to create a “flexible box” layout for HTML elements. Applying this property to an element allows for flexible sizing and positioning of elements of its contents.

-webkit-line-clamp is used to limit the number of lines of text displayed within an element, and to add an ellipsis at the end of the last visible line. In the example above, it is set to 2, which limits the display to two lines.

-webkit-box-orient property is set to "vertical" to ensure that the text is displayed vertically within the box, and the overflow property is set to "hidden" to hide any text that exceeds the box.

Finally, the text-overflow property is set to "ellipsis" to append an ellipsis to the end of the last visible line.