how to add three dots to text when overflow in html?

Question

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

Check this link for Cross-browser multiline ellipse. https://codepen.io/natonischuk/pen/QbGWBa — Himanshu Shekhar, Mar 25 '19 at 06:00

score 168 · Answer 1 · edited Jul 25 '22 at 14:06

168

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;
}

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

edited Jul 25 '22 at 14:06

Jakub Kurdziel

answered Apr 15 '16 at 17:53

rajesh

4

But it shows only a single row – Jonathan Ivgi Apr 15 '16 at 19:51
1

Please. Check my update. – rajesh Apr 16 '16 at 07:43
@rajesh Is this css can be used in email format so i can make email responsive like your demo? – Bhavin Thummar Nov 02 '18 at 07:16
Yes of course.. – rajesh Nov 03 '18 at 08:08
4

it only works with webkit.. not working on firefox – Haseeb Zulfiqar Jan 04 '19 at 06:09
3

This multiline version works only for webkit. At least answer should mention it. – Gherman Feb 26 '19 at 15:39
works for me only when setting max-width – Maayan Hope Mar 11 '21 at 20:49

1 Answers1