仅显示段落的前两行

Question

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

例子：

这是一段长文本，我们只需要在两行上显示它。

=>

这有点长 文本，我们需要...

显示的文本必须带有<p> 标记。

Answer 1

文本溢出适用于某些浏览器 -> http://www.quirksmode.org/css/textoverflow.html

或

这里的答案很好 -> Insert ellipsis (...) into HTML tag if content too wide

或

仅限制显示 2 行 -> 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 是唯一不支持 text-overflow 的浏览器，直到版本 7（换句话说：直到最近），我建议您只使用 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>