Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate

// Looking for this kind of text in my UI

"Lorem ipsum dolor sit amet, consectetur........."

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in reprehenderit in voluptate

// Looking for this kind of text in my UI

"Lorem ipsum dolor sit amet, consectetur........."

• javascript
• html
• css

Share Improve this question Follow edited Mar 26, 2021 at 17:15 rishabh tripathi asked Mar 26, 2021 at 17:02 rishabh tripathirishabh tripathi 9611 silver badge1111 bronze badges 2

• Does this answer your question? How do I toggle my "read More" with CSS only – Not A Robot Commented Mar 26, 2021 at 17:07
• First, read this on how to ask questions correctly how-to-ask. And the answer, by the way. In css you cannot add an ellipse after a certain number of characters, you can do it in js, e.g. with this library show-more – Grzegorz T. Commented Mar 26, 2021 at 17:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Use text-overflow css property.

p {
  width: 200px;
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

<p>Lorem ipsum dolor sit amet, consectetLorem ipsum dolor sit amet, consectetLorem ipsum dolor sit amet, consectet</p>

You could use something like

text-overflow: ellipsis;

in a class or in the specific div's CSS properties.

Check this guide.

Please notice that in this solution you are not defining the number of characters after which the text will be truncated, but you should define the dimension of the element containing the text.

Check here where it's supported.

1. white-space property sets how white space inside an element is handled.

   nowrap collapses white space as for normal.

2. overflow sets the desired behavior for an element's overflow.

   hidden content is clipped if necessary to fit the padding-box.

3. text-overflow CSS property sets how hidden overflow content is signaled to users.

   ellipsis value will display an ellipsis

Code:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor
  in reprehenderit in voluptate
</p>