多行省略css

/*多行省略*/
.Pellipsis2{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.Pellipsis3{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.Pellipsis4{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.Pnowrap{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

使用方式：

<p class='Pnowrap' style='margin-bottom:20px;width: 500px;'>冬枣又名冻枣、雁来红、苹果枣、冰糖枣，是目前公认的鲜食优质栽培品种。冬枣果实近圆形，果面平整光洁，似小苹果，汁液多、甜味浓，略酸。冬枣营养丰富，冬枣果肉内除含有其他枣果中的营养物之外，还富含人体所需的19种氨基酸和维生素A、B、C、D等多种维生素，维生素C含量高。冬枣还含有钾、钠、铁、铜等多种微量元素以及抗癌物质环磷酸腺苷、环磷酸鸟苷等。</p>
<p class='Pellipsis2' style='margin-bottom:20px;width: 500px;'>冬枣又名冻枣、雁来红、苹果枣、冰糖枣，是目前公认的鲜食优质栽培品种。冬枣果实近圆形，果面平整光洁，似小苹果，汁液多、甜味浓，略酸。冬枣营养丰富，冬枣果肉内除含有其他枣果中的营养物之外，还富含人体所需的19种氨基酸和维生素A、B、C、D等多种维生素，维生素C含量高。冬枣还含有钾、钠、铁、铜等多种微量元素以及抗癌物质环磷酸腺苷、环磷酸鸟苷等。</p>
<p class='Pellipsis3' style='margin-bottom:20px;width: 500px;'>冬枣又名冻枣、雁来红、苹果枣、冰糖枣，是目前公认的鲜食优质栽培品种。冬枣果实近圆形，果面平整光洁，似小苹果，汁液多、甜味浓，略酸。冬枣营养丰富，冬枣果肉内除含有其他枣果中的营养物之外，还富含人体所需的19种氨基酸和维生素A、B、C、D等多种维生素，维生素C含量高。冬枣还含有钾、钠、铁、铜等多种微量元素以及抗癌物质环磷酸腺苷、环磷酸鸟苷等。</p>
<p class='Pellipsis4' style='margin-bottom:20px;width: 500px;'>冬枣又名冻枣、雁来红、苹果枣、冰糖枣，是目前公认的鲜食优质栽培品种。冬枣果实近圆形，果面平整光洁，似小苹果，汁液多、甜味浓，略酸。冬枣营养丰富，冬枣果肉内除含有其他枣果中的营养物之外，还富含人体所需的19种氨基酸和维生素A、B、C、D等多种维生素，维生素C含量高。冬枣还含有钾、钠、铁、铜等多种微量元素以及抗癌物质环磷酸腺苷、环磷酸鸟苷等。</p>

效果：

 

关于多行省略ie的兼容，没法展示省略号，并且会显示全部，如图：

 

因此，对于ie就只好记得设置盒子高度，隐藏超出部分。

 

这里补充记录一个问题：

一行以上的多行省略，会比实际的不省略时的高度小1px。所以实际工作中，为了避免这1像素的不均匀造成布局混乱的问题，我们可以给省略部分设置max-height为省略生效时的高度；

解决设置：我这里实际上编译会变rem，所以我这里的高度其实不完全是37px，可根据自己的来调整