3 line long html preview text

Question

I have a thread and want a little preview text for every thread. Like this:

How I can loose weight?  <- Headline
bla bla bla bla bla     |
bla bla bla bla bla     | <- Preview
bla bla bla bla bla...  |

I want there a three lines long preview text that end's simply with '...' I tried it with:

.p {
color: grey; 
text-overflow: ellipsis; 
overflow: hidden; 
word-wrap: break-word; 
line-height: 16px; 
max-height: 32px;
}

but this haven't worked for me.. does anybody know a solution for that? maybe with JS or JQuery?

`How I can loose weight?` http://www.health.com/health/gallery/0,,20501331,00.html — A. Wolff, Apr 13 '16 at 13:05
@BhushanKawadkar I'm just putting all that in a
bla bla
tag. I will take the code inside a class after I've got a solution. — WellNo, Apr 13 '16 at 13:06
Multi line truncating in CSS is surprisingly still not easily done in all major browsers. You might be interested in [this article](http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/) — michaPau, Apr 13 '16 at 13:22
@michaPau i tried it and it worked. but well, it's a dirty solution :/ — WellNo, Apr 13 '16 at 13:27

Vincent G · Accepted Answer · 2016-04-13T13:15:58.590

2

It works, see it here

.p {
  color: grey; 
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space: nowrap; 
  line-height: 16px; 
}

EDIT

Here is kind of a dirty trick to make it fits on 3 lines with "..." content in the end :

.p {
  color: grey; 
  overflow: hidden; 
  height: 50px;
  line-height: 16px; 
  position: relative;
  word-wrap: break-word;
}

.p:after { content: "..."; background: #f3f5f6; position :absolute; right: 0; bottom: 2px;}

See it here

edited Apr 13 '16 at 13:15

answered Apr 13 '16 at 13:08

Vincent G

8,547
1
18
36

This will only ever be one line due to `white-space: nowrap` though – Rory McCrossan Apr 13 '16 at 13:10
no it don't. thats just a single line. I want that preview to be 3 lines long and end with '...' – WellNo Apr 13 '16 at 13:10
1

@Rory McCrossan You're right. I've updated my answer to make it fits on 3 lines. – Vincent G Apr 13 '16 at 13:17
I don't know why but it doesn't give me the three dots at the end of the line.. – WellNo Apr 13 '16 at 13:33
The three dots are here because of this part : `content: "...";` – Vincent G Apr 13 '16 at 13:36

3 line long html preview text

1 Answers1

Linked