微信小程序实现指定显示行数 多余的文本将被删除 并由省略号替换

翻译

实现

wxml view class=' goods-details ' text class=' goods-details-title ' goods details/text text catch tap=' showall action ' class=' goods-details-content { { issushowalcontent？content-all ' : ' content-breif ' } } '如果你身体好，就是晴天。如果你很好，你是一个异国他乡，年轻的夫妻，你很有爱心。她意外地失去了第一个孩子。他安慰她：“没关系，我答应你，我们会再要一个孩子。“经过多年的磨砺，他也离开了你，也就是晴天，也就是晴天，你也是一样，异国他乡，年轻的情侣，无与伦比的爱情，她不小/文/viewxss。商品-详细信息{ display: flex宽度： 100%；flex-direction:柱；保证金-top : 20 rpx；背景-color : # fff；}.商品-详情-标题{ color: # 333font-size : 34 rpx；font-weight : 700；左边距left: 24rpx保证金-top : 20 rpx；}.商品-详情-内容{ display :-web kit-box；color: # 4d4d4d左边距left: 24rpxmargin-right : 24 rpx；margin-top : 24 rpx；线高： 52 rpx；飞越：隐藏；word-break : break-all；文本-overflow:省略号；display :-web kit-box；-web kit-box-oriented :垂直；}.内容-全部{}。content-breif {-web kit-line-clamp : 4；//显示几行}js

page({/** * page的初始数据*/data : { isshowalcontent 3360 false }，/* * *生命周期函数-监控页面加载*/onload3360函数(选项){}，showallaction:函数(){this。setdata({ isshowalcontent 3333330)this . data . isshowalcontent })} })})详细的css解释

-网络工具包-线夹

限制块元素中显示的文本行数。

-webkit-line-clamp是不受支持的webkit属性，它不会出现在CSS规范草案中。

要达到这个效果，需要结合其他国外的WebKit属性。常见绑定属性：

display: -webkit-box:必须组合属性才能将对象显示为弹性伸缩盒模型。-Webkit-box-orient:设置或检索伸缩盒对象的子元素排列必须组合的属性。文本溢出：当有多行文本时，可以用省略号“…”隐藏超出范围的文本。

泛滥

指定当内容溢出元素框时会发生什么。所有主流浏览器都支持溢出属性。您可以采用以下值：

可见：默认值。内容不会被修剪，将在元素框外呈现。隐藏：内容将被修剪，其余内容将不可见。滚动：内容将被修剪，但浏览器将显示滚动条来查看其余内容。自动：如果内容被修剪，浏览器将显示一个滚动条来查看其余内容。inherit:指定溢出属性值应该从父元素继承。

断字

指定如何处理换行。您可以采用以下值：

normal使用浏览器的默认换行规则。break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。

文本溢出

指定当文本溢出包含的元素时会发生什么。这些值如下：

剪辑：修剪文本。省略号：显示省略号来表示修剪后的文本。字符串：使用给定的字符串来表示修剪后的文本。(ps:我试过了。为什么小程序不起作用？)

空白空间

此外，另外引入这个元素。文本不换行(即只有一行)。您可以这样做：

P{ white-space: nowrap}摘要

以上是边肖给大家介绍的微信小程序，可以指定显示行数，用省略号代替。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！