Trimmed text with dots in css

How to show dotted trim text in CSS ?

Aman Jain,

In this article we will show you how to show trimmed text with dots. We can also show dotted text with JavaScript or any server side language. We will take a simple example of text in div or p tag to trim the text after a specific width.

Here is the simple example of it.

<div class='trim-txt'>This is a long simple text to trim it</div>

and the css is

.trim-txt {
        width: 200px;
        overflow:hidden; 
        white-space:nowrap; 
        text-overflow: ellipsis;
        color: red;
    }

Here we used the most important property text-overflow: ellipsis, white-space:nowrap and overflow:hidden to trim the text with dot.H

Here is the output :

This is a long simple text to trim it

How to trim text with dot after two lines or more ?

In the above example we trimmed one line text after a specific width, but sometimes we want to trim the text after 2 or 3 lines. So here is the next property to handle multilines.

<div class='trim-txt-multiline'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

and CSS

.trim-txt-multiline {
  width: 200px;
  height: 40px;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

Here we added white-space: normal ,display: -webkit-box, -webkit-line-clamp: 2 and -webkit-box-orient: vertical to show the trimmed text in multi line.

Here is the example :

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

CSS