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

use*_*986 2 html css

我想将文本限制在一个内部的两行 <div>

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

例如:

长文继续

在路上

进入一条车道.

***这应该是:

长文继续

在路上

我只能用css来做..

请指教?

Ric*_*ett 23

如何将div的高度固定为两行高,并使用overflow:hidden;?

例如:

<style type="text/css">
  .twolines
  {
     font-size: 20px;
     height: 48px;
     overflow: hidden;
  }
</style>
Run Code Online (Sandbox Code Playgroud)

您还可以使用em值和line-height:

<style type="text/css">
  .twolines
  {
     font-size: 1em;
     line-height: 1em;
     height: 2em;
     overflow: hidden;
  }
</style>
Run Code Online (Sandbox Code Playgroud)

这是一个完整的,有效的例子:

<!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>
Run Code Online (Sandbox Code Playgroud)