3 Line Long Html Preview Text

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 | <- Previ

Solution 1:

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