how to add three dots to text when overflow in htm

Question

This question already has answers here:

html/CSS Ellipsis (1 answer)

Applying an ellipsis to multiline text [duplicate] (25 answers)

Closed 4 years ago.

How can I show three dots(...) in a text like this?

Answer 1

Add all these. To make in single line.

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:100px; // some width

To do in multi line which actually you asked.

#content{
overflow: hidden;
width:100px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

working fiddle: https://jsfiddle.net/mishrarajesh/676jc7sa/

Please note that this multiline code is supported only in web-kit browsers for now.