如何折叠段落并用“...”替换其余内容？

Question

好吧，我在段落中有内容，也许是这样：

<div style="width:30px">
  <p>12345678901234567890abcdefghijklmnopqrstuvwxyzIlovePaulinaVega</p>
</div>

我们都知道由于其父级的宽度，内容将被分成许多行，但我只想保留前2行，其余的则替换为'...'。我想知道如何实现它。请告诉我。

Answer 1

＆＃13;

＆＃13;

p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

＆＃13;

<div style="width:100px">
  <p>12345678901234567890abcdefghijklmnopqrstuvwxyzIlovePaulinaVega</p>
</div>

＆＃13;

＆＃13;

＆＃13;

像这样添加CSS：

p{
  text-overflow:ellipsis; 
  white-space:nowrap;
  overflow:hidden;
 }

Answer 2

试试这个

的jsfiddle：

http://jsfiddle.net/2zggrdur/1/

CSS：

p {
        line-height: 1.5em;
        height: 3em;
           text-overflow:ellipsis; 
        overflow: hidden;
    }

1. 将高度属性指定为段落中可见的数字行或行。
2. text-overflow：省略号和溢出：隐藏将隐藏和3点属性。
3. 根据段落的Allighn父宽度。