效果图
实现
wxss
js
/**
},showAllAction: function() {
this.setData({
isShowAllContent: !this.data.isShowAllContent
})
}
})
详细css讲解
-webkit-line-clamp
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的 WebKit 属性。常见结合属性：
•display: -webkit-Box： 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 •-webkit-Box-orient： 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 •text-overflow：可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
overflow
规定当内容溢出元素框时发生的事情。所有主流浏览器都支持 overflow 属性。可以取下面几个值：
•visible： 默认值。内容不会被修剪，会呈现在元素框之外。 •hidden： 内容会被修剪，并且其余内容是不可见的。 •scroll： 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 •auto： 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 •inherit： 规定应该从父元素继承 overflow 属性的值。
word-break
•normal 使用浏览器默认的换行规则。 •break-all 允许在单词内换行。 •keep-all 只能在半角空格或连字符处换行。
text-overflow
规定当文本溢出包含元素时发生的事情。取值如下：
•clip：修剪文本。 •ellipsis： 显示省略符号来代表被修剪的文本。 •string： 使用给定的字符串来代表被修剪的文本。（ps：试过，小程序里面咋没有效果？？？）
white-space
另外额外介绍下该元素，文本不进行换行（也就是只有一行），可以这么操作：
总结
以上所述是小编给大家介绍的微信小程序实现指定显示行数多余文字去掉用省略号代替。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
