微信小程序文字超出自动省略并加省略号

当我们制作卡片时，因为内容文本比较长，我们也不能把他直接呈现在首页面，这样显得不美观，所以要使用超出规定的字数自动省略并加省略号...

代码实现

display: -webkit-box;
//弹性的盒子
overflow: hidden;
//超出文本自动隐藏
text-overflow: ellipsis;
//当文本溢出时用省略号表示
word-wrap: break-word;
//允许长单词或 URL 地址换行到下一行
-webkit-line-clamp: 3;
//显示的行数：3
-webkit-box-orient: vertical;
//从上到下垂直排列

具体了解

CSS word-wrap 属性 (w3school.com.cn)https://www.w3school.com.cn/cssref/pr_word-wrap.aspCSS text-overflow 属性 (w3school.com.cn)https://www.w3school.com.cn/cssref/pr_text-overflow.asp

 运行结果