仅显示段落的前四行，后跟省略号答案

【问题标题】：Show only first four lines of paragraph followed by ellipsis仅显示段落的前四行，后跟省略号
【发布时间】：2014-04-01 05:25:06
【问题描述】：

我正在使用 HTML 段落。我只想显示最多四行的段落，但是文本太长了。因此，我只想显示前四行，而不是整个文本，然后是省略号。

在 CSS 中，我尝试使用 word-wrap:break-word;，但它只在四行之后换行。

例如，我想看看这个（行数会因浏览器而异，但为了争论，假设只有 4 行）：

Lorem ipsum dolor sit amet，consectetur adipiscing elit。整数 ac justo sodales、cursus turpis eget、lacinia risus。 Aenean pretium eleifend mollis。 Cras dictum ipsum eu dolor ultricies，在 dictum diam auctor。在 et nulla libero。整数 volutpat ornare justo ut 发酵。 Ut non blandit leo, nec convallis diam。 Nam congue neque vel turpis mattis scelerisque。 Mauris rhoncus quam ac leo pellentesque...

实际上整个文本会更长。

【问题讨论】：

看看这个多行演练text-overflow:ellipsismobify.com/blog/multiline-ellipsis-in-pure-css
@Gokul Nath：我不明白为什么这个问题被搁置了？是因为它目前写的，很难准确地说出你在问什么？那么下面的答案他们是如何理解的呢？而且我不知道如何简化这个问题。
@V-Xtreme：有点难以理解，但这里并不是每个人都能说一口流利的英语，所以我们不能反对你:-)。看起来您有一个很长的段落，但您希望它只显示前四行，然后是省略号“...”。这个对吗？请更新您的问题。
我已经更新了问题:)。希望现在更清楚了。我被添加了我之前的评论，因为有些人在没有任何 cmets 的情况下关闭了这个问题。所以提问者永远不知道为什么他的问题已经结束，特别是当你得到相同问题的答案时。

标签： javascript html css

【解决方案1】：

在同一个元素上使用：

text-overflow: ellipsis;

【讨论】：

OP 要求它在多行上工作，text-overflow 不支持。看看 Roman Rudenko mobify.com/blog/multiline-ellipsis-in-pure-css 的这个解决方案

【解决方案2】：

我不知道这可以使用 css 来完成。但是你可以使用javascript来做到这一点。像这样的

我假设您的段落 id 是“para”。

<script>
var para=document.getElementById('para').innerHTML;
var p=para.substr(0,200)+"..."; // chane the 200 to your need
alert(p);

</script>

【讨论】：