3行长html预览文本 [英] 3 line long html preview text

问题描述

我有一个线程，并且希望每个线程都有一个预览文本。像这样：

 我如何减肥？ <  - 标题
 bla bla bla bla bla | 
 bla bla bla bla bla <  - 预览
 bla bla bla bla bla ... | 
  

我想要一行三行预览文本，最后只需加上'...'
我试过它：

  .p {
 color：grey; 
文本溢出：省略号; 
 overflow：hidden; 
 word-wrap：分词; 
 line-height：16px; 
最大高度：32px; 
} 
  

但这并不适用于我..有没有人知道解决方案那？也许与JS或JQuery？

解决方案

它作品，在这里看到

  .p {
 color：grey; 
文本溢出：省略号; 
 overflow：hidden; 
 white-space：nowrap; 
 line-height：16px; 
} 
  

编辑

这是一种肮脏的伎俩，最终使它适合3行...内容：

  .p {
颜色：灰色; 
 overflow：hidden; 
 height：50px; 
 line-height：16px; 
职位：亲属; 
 word-wrap：分词; 
} 
 
 .p：after {content：...;背景：＃f3f5f6;位置：绝对;正确：0; bottom：2px;} 
  

在此处查看

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

I want there a three lines long preview text that end's simply with '...' I tried it with:

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

but this haven't worked for me.. does anybody know a solution for that? maybe with JS or JQuery?

解决方案

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

这篇关于3行长html预览文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！