In previous articles, I have mentioned Add text on mouseover or hover element in HTML and How to change color of SVG (Various ways using CSS) but now in this article, I have provided example of using CSS line-clampig to truncate text and show ellipses after n lines using CSS in HTML div.

Show Ellipses After Text Overflow for 2 Lines using Line-Clamp

The line-clamp CSS property truncates text at a specific number of lines. So Let's take a example in which we will be using line-clamp CSS property to show ellipses after 2 lines of text in a div.

Considering we have below HTML text which we want to show text until 2 lines

<div>Lorem ipsum dolor sit amet, novum menandri adversarium ad vim, ad his persius nostrud conclusionemque. Ne qui atomorum pericula honestatis. Te usu quaeque detracto, idque nulla pro ne, ponderum invidunt eu duo. Vel velit tincidunt in, nulla bonorum id eam, vix ad fastidii consequat definitionem.</div>

then CSS to show ellipses after 2 lines of text using Line-Clamp would be

div {
    display: -webkit-box;
    max-width: 250px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Ouput:

css-line-clamp-show-ellipses-min_xxeqkm.png

As you can see from above CSS, we are using line-clamp: 2 with max-width: 250px property, which means, after 2 lines text should be clamped and show ellipses.

Note: It is required to use max-width and overflow: hidden CSS property with line-clamp, otherwise line-clamp will not work.

You can also change CSS property line-clamp: 3 to show 3 lines or text and then ellipses (..) or change the line count to 1 also, as needed.

It is supported by major browser like Chromium, Safari, Webkit, Edge but It's only not supported by IE and Opera Mini.

Truncate text in HTML/CSS without Line-Clamp

Although line-clamp is easier solution, as we can see from above example, but if it doesn't work or you don't want to use it for some reason, then you can still truncate text and show ellipses for HTML text without using it.

Let's try to add ellipses for single text of text, then you must have following properties

  • With text-overflow: ellipsis text can be truncated and show ... in single line. But
  • It must have white-space: nowrap
  • It must have overflow with value other than visible

So, let's take a look at an example using above CSS properties to truncate text.

CSS would be like this

div {
  text-overflow: ellipsis;
  /* Needed to make it work */
  overflow: hidden;
  white-space: nowrap;
}

Output

/text-overflow-ellipses-css-min_ahc1uy.png

Fiddle

Another Method

We can also use CSS pseudo elements, here is the sample CSS considering above HTML

div{
  overflow: hidden;
  position: relative;
  line-height: 1.2em;
  max-height: 6em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
	width:300px
}
div:before {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
}
div:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  background: white;
}

and here is the working fiddle with output, when using above CSS on div

That's it, these were some of the best and easy way to truncate text in HTML and show ellipses.

You may also like to read:

Styling Input type="file" button using CSS & Bootstrap

How to create CSS Bookmark ribbon horizontally with text?

Social media icons hover effect (CSS Based)

Useful CSS animation examples with code & animation basics

How to force HTML table row to show data in single row using CSS?

how to interchange position of two divs on mobile