笔记：如何使用CSS设置文字显示指定行数后隐藏它只有在 display 属性设置成 -webkit-box 或者 -we

代码如下：

  display: -webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;

-webkit-line-clamp CSS 属性可以把块容器中的内容限制为指定的行数.

它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical时才有效果在大部分情况下,也需要设置 overflow 属性为 hidden, 否则,里面的内容不会被裁减,并且在内容显示为指定行数后还会显示省略号(ellipsis ).
当他应用于锚(anchor)元素时,截取动作可以发生在文本中间,而不必在末尾.

box-orient CSS 属性用来设置一个元素是水平还是垂直布局其内容。

这是原始的css弹性布局草案的一个属性，已经被最新的标准替代。 flexbox 为现行标准。

目前所有主流浏览器都不支持box-orient属性。
Firefox通过私有属性- MOZ-box-orient支持。
Safari, Opera, 和 Chrome通过私有属性 -webkit-box-orient 支持.

horizontal 盒子水平布局其内容。
vertical 盒子垂直布局其内容。
inline-axis (HTML) 盒子沿内联轴展示其子元素。
block-axis (HTML) 盒子沿块轴展示其子元素。
内联轴和块轴取决于写入模式的关键字，在英语中，分别对应水平和垂直方向。