文字超出容器自动显示省略号

1.为当前的text文本加上以下样式即可

display:-webkit-box;  // 最关键的因素

-webkit-line-clamp:1;  //多少行显示省略号，默认为1，根据实际填写

overflow:hidden;   //文字超出隐藏

text-overflow:ellipsis;   //文字超出显示省略号

-webkit-box-orient:vertical;   //未知

word-break:break-all;  //未知

2.有时会出现第二行元素偶尔没有遮挡完的情况，调整行高，设置line-height就可以了。