元素中显示n行文字且超出隐藏显示省略号

  
    
    
    
  
  
    

      首先,我们通过 overflow 属性来规定: 当内容溢出元素框时会发生的事情,因为后面的内容会设置只显示 n 行,所以我们设置元素溢出隐藏,则值为 hidden;
      随即,我们通过 text-overflow 属性规定: 当文本溢出包含元素时发生的事情,我们想让文本超出部分显示为...省略号,所以我们选择值 ellipsis;
      然而,我们还需要将该元素模型进行转换,通过 display 属性设置元素如何显示,设置值为 -webkit-box 可以将元素转换为盒子模型;
      此时,我们可以限制我们需要展示的文本行数了: -webkit-line-clamp 属性用于限制块容器可能包含的行数,当然,有个限制,。仅当显示属性设置为"-webkit-box"或"-webkit-inline-box"并且"-webkit-box-orient"属性设置为"垂直"时，此属性才有效;
        那么,我们设置显示 n 行,超出n行则 溢出隐藏,显示省略号;
      前文提到: -webkit-line-clamp 属性仅当设置为"-webkit-box"或"-webkit-inline-box"并且"-webkit-box-orient"属性设置为"垂直"时，此属性才有效,那么我们设置 -webkit-box-orient,
      指定div元素的子元素横向排列,选择它的值 vertical  从顶部向底部垂直布置子元素(竖直);
      到此为止,我们 元素中显示n行文字且超出隐藏显示省略号 步骤完成;

      那么,还有一种情况:
        如果 该元素上还有父级，且设置了 white-space:nowrap; 若想实现此效果需要在该元素中加上 white-space:initial 还原换行；