vue+vant组件库文本超出多行显示省略号

在使用van-grid遇到了问题，源代码如下：

section h3{
    font-size: .3733rem;
    font-weight: 400;
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space:nowrap; //溢出则不换行
}

使用 white-space:nowrap 会让原本的样式出现问题，如图：

现在使用css3可以解决这个问题，强制不换行，用来代替 white-space:nowrap

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:1; //这个属性需要同上面两个属性一起使用，表示显示的行数。

更改后的代码如下：

section h3 {
  font-size: 0.3733rem;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 1; 
}

最终效果如图，没有破坏原本的样式：