3行长html预览文本

我有一个线程,并希望每个线程都有一个预览文本。 像这样:

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

我想要一个三行长的预览文本,结尾只是’…’我试过它:

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

但这对我没有用..有人知道解决方案吗? 也许用JS或JQuery?

它有效,请看这里

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

编辑

这是一种肮脏的技巧,使它适合3行,最后带有“……”内容:

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

在这里看到它