我想将文字限制为<div>
如果文字有两行以上,则应在显示两行后隐藏文字的其余部分
例如:
长文字继续
在路上
进入一条车道。
* * *这应该是:
长文字继续
在路上
我必须只使用css来实现..
请建议?
答案 0 :(得分:23)
如何将div的高度固定为两行高,并使用overflow:hidden;
?
例如:
<style type="text/css">
.twolines
{
font-size: 20px;
height: 48px;
overflow: hidden;
}
</style>
您还可以使用em
值和line-height
:
<style type="text/css">
.twolines
{
font-size: 1em;
line-height: 1em;
height: 2em;
overflow: hidden;
}
</style>
这是一个完整的,有效的例子:
<!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>
答案 1 :(得分:0)
这是Solution。
HTML:
<div>The quick brown fox jumps over the lazy dog.</div>
CSS:
div{background:gray; width:100px; height:40px; overflow:hidden;}
希望这有助于。