我有一个带有多行段落的DIV。
是否有任何方法(也许使用jQuery),只显示段落的第一行并隐藏其他行?
是否有任何方法(也许使用jQuery),只显示段落的第一行并隐藏其他行?
p { color: white; }
p:first-line { color: black; }
虽然这个问题已经有一段时间没有回答了,但是由于这里没有示例,所以我提供一个相当不错的示例:
<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>
line-height: 2.2em;
与所需的高度一起添加可以使其更加稳定。一个好的主意是:line-height: 1.25em; height: 1.25em;
保持了一个漂亮的间隔线,而使用height: 2.5em
则给你前两行。 - Jonas Lundman没有一种直接的方法可以通过指定第一行来完成此操作。我建议使用CSS更改DIV的高度,以仅显示第一行。对我来说,这似乎是最简单的解决方案。如果您想使用javascript切换为显示整行,只需使用它来将DIV的高度更改回100%即可。
编辑:我被纠正了,我不知道有一个first-line伪类。但更改高度仍然可能是最简单的方法。
无需使用JavaScript,测量高度或更改可见性。只需将段落设置为内联显示,并不包裹其文本。您需要在父div上设置overflow为“hidden”,以便段落中的剩余行不会溢出。
#wrap {
overflow: hidden;
text-overflow: ellipsis;
}
p {
display: inline;
white-space: nowrap;
}
我在这里提供一个想法。它允许您使用文本框来显示和隐藏文本。仅使用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>
我没有尝试过,但你应该能够使用可见性来做得更好,例如:
<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; }