仅使用css限制两行中的文本

时间:2013-05-15 13:11:29

标签: html css

我想将文字限制为<div>

中的两行

如果文字有两行以上,则应在显示两行后隐藏文字的其余部分

例如:

  

长文字继续

     

在路上

     

进入一条车道。

* * *这应该是:

  

长文字继续

     

在路上

我必须只使用css来实现..

请建议?

2 个答案:

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

希望这有助于。