Html 仅使用 css 限制两行文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16565943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Restricting text in two lines using css only
提问by user2385986
I want to limit the text to two lines inside a <div>
我想将文本限制在 a 内的两行 <div>
If the text is coming in more than two lines, then it should hide rest of the text after displaying two lines
如果文本超过两行，则应在显示两行后隐藏其余文本
For example:
例如：
Long text continues
down the road
into a lane.
长文继续
在路上
进入一条车道。
***this should come as:
* **这应该是：
Long text continues
down the road
长文继续
在路上
I have to do it using css only..
我必须只使用 css 来做到这一点..
Please suggest?
请建议？
回答by Richard Ev
How about fixing the height of your div to be exactly two lines high, and using overflow:hidden;?
如何将 div 的高度固定为两行高，并使用overflow:hidden;?
For example:
例如：
<style type="text/css">
.twolines
{
font-size: 20px;
height: 48px;
overflow: hidden;
}
</style>
You could also use emvalues and line-height:
您还可以使用em值和line-height：
<style type="text/css">
.twolines
{
font-size: 1em;
line-height: 1em;
height: 2em;
overflow: hidden;
}
</style>
Here's a complete, working example:
这是一个完整的工作示例：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.twolines
{
font-size: 1em;
background-color: silver;
line-height: 1em;
height: 2em;
overflow: hidden;
}
.twolines p
{
margin: 0;
}
</style>
</head>
<body>
<div class="twolines">
<p>Long text continues</p>
<p>down the road</p>
<p>into a lane.</p>
</div>
</body>
</html>
