显示段落的第一行

Question

我有一个多行段的DIV。

有什么办法（也许使用jQuery）只显示段落的第一行并隐藏其他的？

Answer 1

通过指定第一行，没有一种彻底的方法可以做到这一点。 我会建议改变使用CSS的DIV的高度，只显示第一行。这对我来说似乎是最简单的解决方案。如果你想改变显示整个行的JavaScript只是用它来改变DIV的高度回到100％。

编辑：我纠正了，我没有意识到有一个第一线伪类。然而，改变高度仍然是最简单的方法。

Answer 2

这里是一个办法（在某种程度上）通过使一段白色的，白色除外：它的第一线：http://jsbin.com/usora4/2/edit

片段CSS的：

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

Answer 3

确定的高度你的行并设置div的高度，使得只显示一行，并将div的overflow属性设置为hidden。

Answer 4

我还没有尝试过，但您应该可以使用可视性做得更好，例如

<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.excerpt { visibility: hidden; } 
div.excerpt:first-line { visibility: visible; } 

Answer 5

它已经一段时间，因为这是回答，但看到这里没有例子是一个非常有效：

<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 6

不需要JavaScript，测量身高或改变能见度。只需将段落设置为内联显示，而不是包装其文本。你需要将父div的溢出设置为“隐藏”，以便段落中的其余行不会溢出。

#wrap { 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
p { 
    display: inline; 
    white-space: nowrap; 
}​ 

http://jsfiddle.net/VvdBs/

Answer 7

这里只是将以此为理念。它允许您使用文本框显示和隐藏文本。仅限CSS。

p.bar { font-size:0; margin:0;padding:10px;background: #ddd; -webkit-transition: font-size .25s;transition: font-size .25s; 
 
} 
 
p.bar:first-line { font-size:20px; } 
 
input:checked + label + p.bar {font-size: 20px;}

<input id="foo" type="checkbox"><label for="foo">show</label><p class="bar">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
 

 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>