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

我想要一个以“...”结尾的三行长预览文本 我试过了：

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

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

Answer 1

It works, see it here

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

See it here