微信小程序实现指定显示行数多余文字去掉用省略号代替
效果图
实现
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 }
总结
以上所述是小编给大家介绍的微信小程序实现指定显示行数多余文字去掉用省略号代替,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- 微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号
- IE 实现文字超出指定长度后用省略号代替
- jsp页面显示指定文字,多余的用...代替,鼠标指着会显示全部内容
- 用css实现文字超出指定宽度显示省略号(...)
- 微信小程序 - 文字超限断尾显示省略号
- 使用CSS不用程序实现文字自动截断 用省略号代替
- [译]line clampin让文字在指定的行数内省略号显示
- 使用CSS不用程序实现文字自动截断 用省略号代替
- android 文字过多只想显示多行多余的文字用省略号代替和调整行间距的属性
- 【微信小程序常见问题】点击指定文字实现指定文字变色解决方案一
- 微信小程序开发之css实现文字限制加省略号
- CSS实现多余文字用省略号代替
- css3实现超出文本指定行数(指定文本长度)用省略号代替
- -webkit-line-clamp 实现限制文字显示多行,多余的用...代替
- 让TextView显示指定的行数,超过部分用省略号代替
- 微信小程序中的canvas 文字断行和省略号显示功能的处理方法
- TextView内容过长显示指定行数加省略号,点击显示全部内容
- jqgrid中实现前台界面显示字符长度固定,后面用省略号代替
- css实现文字过长显示省略号的方法