微信小程序 文字超出view宽度后、超过行数后隐藏显示省略号

这是设置了需要显示3行，超出后隐藏并用省略号代替显示

1、单行显示：

overflow:hidden; /*隐藏溢出*/
text-overflow:ellipsis;/*当文本溢出包含元素时显示省略符号来代表被修剪的文本*/
white-space:nowrap; /*规定段落中的文本不进行换行*/

***同时使用display:flex;会使其失效*** 

2、规定行数显示

 display: -webkit-box;
 word-break: break-all;
 text-overflow: ellipsis;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp:3;/*设置 需要显示的行数*/

拓展

       1、text-overflow属性值

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

       2、white-space属性值：

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。