不确定行数文本上下左右居中并且超出省略号代替

动态获取数据的时候不确定文本行数并且要求文本居中和超出的用省略号来代替

.son{
   overflow: hidden;//超出隐藏
   text-overflow: ellipsis;//溢出用省略号显示
   display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。
   // 控制行数
   -webkit-line-clamp: 2;//超出两行隐藏
   -webkit-box-orient: vertical; // 从上到下垂直排列子元素
   //（设置伸缩盒子的子元素排列方式）
   text-align: center;//文本居中
   }

如果只设置子盒子的样式话代码经过编译后就把-webkit-box-orient: vertical干掉了所以我们这边采用了给他加一个父盒子的办法

首先先给将获取到数据给个父盒子，给父盒子设置 **display: -webkit-box;**属性，然后给父盒子设置 **-webkit-box-align: center，-webkit-box-pack: center;**将不确定宽高的子盒子上下左右居中,子盒子不给宽高，让内容撑出来子盒子的高度，这样子盒子就成为一个不确定宽高的盒子了

.paren{
  width: 178px;
  height: 82px;
  display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。
  -webkit-box-align: center;//左右居中
  -webkit-box-pack: center;//垂直居中
  .son{
      overflow: hidden;//超出隐藏
      text-overflow: ellipsis;//溢出用省略号显示
      display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示。
      // 控制行数
      -webkit-line-clamp: 2;//超出两行隐藏
      -webkit-box-orient: vertical; // 从上到下垂直排列子元素
      //（设置伸缩盒子的子元素排列方式）
      text-align: center;//文本居中
      }
}