显示段落的第一行

Question

我有一个带有多行段落的DIV.

有没有办法(也许使用jQuery)只显示段落的第一行并隐藏其他段落？

Answer 1

这是一种方式(某种方式),使段落白色,除了:第一行:http://jsbin.com/usora4/2/edit

CSS片段:

p { color: white; }
p:first-line { color: black; }

Answer 2

已经有一段时间了,因为这个问题得到了解答,但看到这里没有一个例子可以很好地运行:

<div style="width:200px">
<div>
    This is above the paragraph.
</div>
<div class="excerpt">
    This is my text. It has many lines. This is my text.
    It has many lines.This is my text. It has many lines.
    This is my text. It has many lines. This is my text.
    It has many lines.
</div>
<div>
    This is below the paragraph.
</div>
</div>


<style type="text/css">
div.excerpt { height:2.2em; overflow:hidden; }
div.excerpt:hover { height:auto; }
</style>

http://jsfiddle.net/h82313am/

Answer 3

没有直接的方法可以通过指定第一行来做到这一点。我建议使用 CSS 更改 DIV 的高度以仅显示第一行。在我看来，这是最简单的解决方案。如果您想更改为使用 javascript 显示整行，只需使用它将 DIV 的高度更改回 100% 即可。

编辑：我纠正了，我不知道有一线伪类。然而改变高度可能仍然是最简单的方法。