3行长html预览文本

Question

我有一个帖子，想要为每个帖子提供一些预览文本。像这样：

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

我希望有一个三行长的预览文字，结尾只是＆＃39; ...＆＃39; 我尝试过：

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

但这个避风港对我有用..有没有人知道解决方案？也许用JS或JQuery？

Answer 1

throw an exception

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

It works, see it here