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