70

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

3

1 Answer 1

170

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.

7
  • 4
    But it shows only a single row Apr 15, 2016 at 19:51
  • 1
    Please. Check my update.
    – rajesh
    Apr 16, 2016 at 7:43
  • @rajesh Is this css can be used in email format so i can make email responsive like your demo? Nov 2, 2018 at 7:16
  • 4
    it only works with webkit.. not working on firefox Jan 4, 2019 at 6:09
  • 3
    This multiline version works only for webkit. At least answer should mention it.
    – Gherman
    Feb 26, 2019 at 15:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.