微信小程序实现指定显示行数多余文字去掉用省略号代替
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序实现指定显示行数多余文字去掉用省略号代替,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2726字,纯文字阅读大概需要4分钟。
内容图文
效果图
实现
wxml <view class='goods-details'> <text class='goods-details-title'>商品详情</text> <text catchtap='showAllAction' class='goods-details-content {{isShowAllContent ?"content-all" :"content-breif"}}'>你如安好,便是晴天你如安好,异国他乡,年少夫妻,无比恩爱,她不小心失去了第一个孩子,他安慰她:“没关系,我答应你,我们还会再有孩子。”碾转数年,他留你如安好,便是晴天你如安好你如安好,便是晴天你如安好,异国他乡,年少夫妻,无比恩爱,她不小</text> </view>
wxss
.goods-details { display: flex; width: 100%; flex-direction: column; margin-top: 20rpx; background-color: #fff; } .goods-details-title { color: #333; font-size: 34rpx; font-weight: 700; margin-left: 24rpx; margin-top: 20rpx; } .goods-details-content { display: -webkit-box; color: #4d4d4d; margin-left: 24rpx; margin-right: 24rpx; margin-top: 24rpx; line-height: 52rpx; overflow: hidden; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .content-all { } .content-breif { -webkit-line-clamp: 4; //显示几行 }
js
Page({ /** * 页面的初始数据 */ data: { isShowAllContent: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { }, 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
另外额外介绍下该元素,文本不进行换行(也就是只有一行),可以这么操作:
p{ white-space: nowrap }
总结
以上所述是小编给大家介绍的微信小程序实现指定显示行数多余文字去掉用省略号代替,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
内容总结
以上是互联网集市为您收集整理的微信小程序实现指定显示行数多余文字去掉用省略号代替全部内容,希望文章能够帮你解决微信小程序实现指定显示行数多余文字去掉用省略号代替所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。