仅显示段落中的前两行

Question

我需要在两行显示一些文字，如果文字太长，则添加一些“......”。

示例：

This is some long text and we need to show it on only two lines.

=＆GT;

This is some long
text and we need ...

文字必须以<p>标记显示。

Answer 1

文字溢出适用于某些浏览器 - ＆gt; http://www.quirksmode.org/css/textoverflow.html

或

这里的优秀答案 - ＆gt; Insert ellipsis (...) into HTML tag if content too wide

或

仅限制显示2行 - ＆gt; jTruncate jQuery插件运行良好

Answer 2

CSS3解决方案=没有Javascript解决方案

CSS3支持（IE甚至更早支持它 - 其他人应该支持的罕见事物之一）text-overflow: ellipsis;样式设置自动将省略号添加到溢出文本。可以看到浏览器支持on this page。

CSS2.1 =无Javascript解决方案

This JSFiddle是一个仅限CSS的解决方法 - 想要的，这可能不是你想要的，但可以很容易地进一步增强。它只是在每个段落的末尾添加省略号。

CSS2.1 =只是一点Javascript解决方案

上面的示例也可以是enhanced，因此带有:after的CSS类只会添加到内容超出元素维度的段落中。使用一小部分Javascript可以很容易地完成。问题是省略号总是位于正确的位置。如果那不是问题，那么这是一个非常好的方法。

没有CSS =完整的Javascript解决方案

还有一种Javascript方式可以做到这一点，并在this Stackoverflow answer上得到了很好的描述。它描述了使一行充满文本的算法，但在你的情况下可以实现类似的东西来填充两行，当超过时，添加一个省略号。

我的建议 - 结果

由于Firefox是唯一一个在版本7之前不支持text-overflow的浏览器（换句话说：直到最近），我建议您使用CSS3解决方案。

为什么？ Firefox浏览器会自动更新（默认情况下），因此很可能只有一小部分用户看不到省略号。直到他们的浏览器升级。如果他们明确禁用自动浏览器更新，他们可能会手动执行此操作，并且迟早也会这样做。

Answer 3

var string = "This is some long text and we need to show it on only two lines.".split(" ");
var first_line = string.slice(0,5).join(" ");
var second_line = string.slice(6,10).join(" ");

var display_string = first_line + "<br />" + second_line;
if(string.length > 10) display_string += "...";
$("#text").html(display_string);

肯定有更好的方法可以做到这一点，但这至少可以让你开始。它显示每行5个单词，如果有超过10个单词，则添加省略号。寻求更好的解决方案，但你可以使用它直到找到一个。 http://jsfiddle.net/hepW8/

Answer 4

您可以切片并在渲染时将其与点一起嵌入，然后使用css宽度播放以使其两行。

.js文件

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor"

.ejs文件

<p>    <%= text.slice(0,30)+" ..." %>    </p>