我有一个带有多行段落的DIV。
是否有任何方法（也许使用jQuery），只显示段落的第一行并隐藏其他行？
是否有任何方法（也许使用jQuery），只显示段落的第一行并隐藏其他行？
7个回答
7
这是一种方法（有点）：使段落白色背景上的:first-line外形不同：http://jsbin.com/usora4/2/edit
CSS片段：
p { color: white; }
p:first-line { color: black; }
- Chris Coyier
2
是的，这个方法可以行得通，除了空格。因为内容仍然存在，所以p标签不会自动调整大小。它隐藏了文本，但没有隐藏实际的“行”（其中“行”指的是段落中的一块空间）。不过还是很好的方法，加1个赞 :) - RPM1984
好的，简单的想法。但它仍然使用与整个段落相同的空间。 - Victor
6
虽然这个问题已经有一段时间没有回答了，但是由于这里没有示例，所以我提供一个相当不错的示例：
<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>
- k s
1
关于2019年使用不同的nowrap、first-line等方法，这个答案在所问的问题的背景下是正确的。想要补充的是，不同的字体大小和字体族会影响行高。因此，将
line-height: 2.2em;与所需的高度一起添加可以使其更加稳定。一个好的主意是：line-height: 1.25em; height: 1.25em;保持了一个漂亮的间隔线，而使用height: 2.5em则给你前两行。 - Jonas Lundman3
没有一种直接的方法可以通过指定第一行来完成此操作。我建议使用CSS更改DIV的高度，以仅显示第一行。对我来说，这似乎是最简单的解决方案。如果您想使用javascript切换为显示整行，只需使用它来将DIV的高度更改回100％即可。
编辑：我被纠正了，我不知道有一个first-line伪类。但更改高度仍然可能是最简单的方法。
- Ben Kulbertis
2
无需使用JavaScript，测量高度或更改可见性。只需将段落设置为内联显示，并不包裹其文本。您需要在父div上设置overflow为“hidden”，以便段落中的剩余行不会溢出。
#wrap {
overflow: hidden;
text-overflow: ellipsis;
}
p {
display: inline;
white-space: nowrap;
}
- Thomas Higginbotham
1
我在这里提供一个想法。它允许您使用文本框来显示和隐藏文本。仅使用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>- superUntitled
0
确定您的行高，并设置 div 的高度，以便只显示一行，并将 div 的 overflow 属性设置为 hidden。
- Chadwick
-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; }
- Charlie Martin
1
1它不起作用。我尝试了可见性和显示，但都无法使其工作。有趣的是，对于颜色，它可以工作。但是当我从div更改为p，并在行之间引入了一个<br>时，它才能正常工作... - Wagner Silveira
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接