显示段落的第一行

时间:2010-10-19 02:20:08

标签: jquery html css

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

有没有办法(可能使用jQuery)只显示段落的第一行并隐藏其他段落?

7 个答案:

答案 0 :(得分:7)

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

CSS片段:

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

答案 1 :(得分: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/

答案 2 :(得分:3)

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

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

答案 3 :(得分:2)

无需JavaScript,测量高度或更改可见性。只需将段落设置为内联显示,而不是包装其文本。您需要将父div上的溢出设置为“隐藏”,以便段落中的其余行不会溢出。

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

http://jsfiddle.net/VvdBs/

答案 4 :(得分:1)

这里只是添加这个想法。它允许您使用文本框显示和隐藏文本。仅限CSS。

&#13;
&#13;
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;}
&#13;
<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>
&#13;
&#13;
&#13;

答案 5 :(得分:0)

确定线条的高度并设置div的高度,使得只显示一行,并将div的overflow属性设置为hidden

答案 6 :(得分:-1)

我没有尝试过,但你应该能够使用可见性做得更好,例如

<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; }