span标签内内容过多如何实现自动换行，且限制最多行数

需求背景：最近拿到一个小的修改需求，客户需要通过最新一条的物流轨迹给买家发消息通知准备签收等消息，将最新一条的轨迹展示两行，两行展示不全的用"…"标表示。

//原代码是在表格中用来展示这条信息，展示不出的用...代替，添加样式实现内容自动换行且为两行，展示不全用...展示
<span style="white-space:pre-wrap;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;"></span>
//各属性解释
//white-space 指定元素内的空白怎样处理,属性值pre-wrap指保留空白符序列，但是正常地进行换行。
white-space:pre-wrap
//overflow属性指定如果内容溢出一个元素的框，会发生什么;属性值hidden：内容会被修剪，并且其余内容是不可见的。
overflow: hidden
//text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示;属性值ellipsis:显示省略符号 ... 来代表被修剪的文本。
text-overflow: ellipsis
//下面这些组合完成实现多行文本溢出显示...效果
// display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示 。
// -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
// -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 2

实现效果：