主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
本文介绍了百度智能小程序开发中如何将溢出的文字显示为省略号。
就目前的移动设备显示界面而言,如果文字量过长,由于屏幕宽度和高度的原因,可能无法完全显示。 为了提高用户体验,这次溢出的文本应该显示为省略号。
现在我们看看如何实现以下文本内容的行文本溢出样式:
单行文本溢出 多行文本溢出:显示5行以下的所有内容。 ; 如果超过5行(含5行),则只显示5行,超出部分显示为省略号。 如果超过 5 行,则会显示展开按钮。 单击展开以查看所有内容和折叠按钮。 单击折叠可折叠内容并显示展开按钮。 单行文本溢出
1.在js文件中输入以下文本: content:
Page({ data: { content:'人要能拿起,但也要能放下。能拿起就是生存,就是放手得到它是能力,放下它是智慧。如果你放不下它,你就无法摆脱任何不必要的负担。' }});
2. 。 在文件中使用 text-overflow: ellipsis 设置行结尾以显示尾部省略号。
white-space:nowrap; /* 没有换行符*/ Overflow: hide; /* 超越隐藏*/ text-overflow / data: { 人们可以拿起它并放开它 必须是。 能不能拿起,是生存的问题,能不能放下,是人生的问题。 能拿起是能力的问题,能放下是智慧的体现。 你不必放手。有些人拿得起,却放不下。 如果你不能接受它,你将无法完成任何事情。 如果你放不下它,你就会累。 生命之外的一切最终都无法被移除。 早点放手比晚点放手要好。 只有放下不必要的负担,才能在旅途中找到内心的平静。 ' }});
2. 在 CSS 文件中使用 text-overflow: ellipsis 设置行结尾以显示尾部省略号并设置多行文本溢出。
display: -webkit-box;[ k3] webkit-box-direction: Vertical;-webkit-line-clamp: 5; /* 要显示的文本指定行数 */overflow:hidden; /* 超越隐藏 */5 仅显示上面的 5 行(包括这 5 行),任何溢出的省略号都将可见
1. js 文件,文本内容:
Page({ data: { content:'人想要拥有,必须能够放手。能拥有就是生存,放手就是生存能拥有就是拥有,放手才是智慧,放不下就一事无成,不,不如晚点放手。 }});
2. 在 CSS 文件中使用尾随省略号和多行以显示文本溢出。
display: -webkit-box; -webkit-box-orient: 垂直;-webkit-line-clamp: 5;指定行数 */overflow: hide; /* 超出隐藏*/ text-overflow: ellipsis; /* 超出的显示省略号 */ 如果超过5行,点击展开按钮查看
单击展开以显示所有内容和折叠按钮。 点击关闭启动并折叠内容以显示展开按钮。 如需了解更多信息,您可以在工具中导入并查看代码片段:swanide://fragment/598981d541fda485a1715266effc213a1590053197948。
1.在swan文件中输入文本内容并设置按钮:
你好,我正在测试demo竹林长长,绿意盎然,热闹非凡这是一个非常安静祥和的地方。 雨徐徐落下,一缕缕轻烟从绿枝叶中升起,似雾似云,更像是一幅水墨画,香气扑鼻,不知是谁的梦。 更令人陶醉的是那优美的雨声,散落下来,变成了声音,变成了歌曲。 此时,雨如竹篾,风在流动,静静地奏响着内心的呢喃。 听到雨声的人是最好的朋友。 4}}">{{isShow ? '折叠' : '展开'}}
2.设置CSS文件中显示的文本行数。
.title { 显示:flex [;- 方向:行; - 对齐内容:居中; - 对齐项目:居中;}.title_txt { font-Size:34rpx;}.content { text[ k3 - webkit -line-clamp: 5; /* 指定显示文本的行数*/ -webkit-box-orient:vertical Line[ k3]height: 30px ; /* 指定行高 */padding: 0 25rpx; font-size: 30rpx; color: #888;}.content.on {display: block; text-overflow : Clip; btn { text- Align: Center; Color: #333;}
3. 设置js文件中的默认存储状态。
/** * 默认存储状态isShow,作为控制显示和隐藏的开关。 *单击 isShow 按钮。 只需反转状态值即可。 * 获取行数的计算方法: * 行数 = 内容高度/行高 */Page({ data: { isShow: false, lineNum: 5}, open() { this.setData({ isShow: !this.data.isShow }); }, onShow() { const query = swan.createSelectorQuery(); query.select('.content' ).boundingClientRect() ; query.exec(res => { const LineHeight = 30; // 行高 const LineNum = res[0].height / LineHeight; // 行数 if (LineNum < 5) { this.setData( { lineNum: LineNum } ); } }); }});
推荐文章:《PHP》《小程序开发》
PHP快速学习视频免费教程(从初学者到高手)
如何学习PHP?如何开始学习PHP?如何快速学习PHP? 这里有简单的 PHP 学习教程(从初学者到专家)。 您可以保存并下载您想学习的朋友。
下载
这几篇文章你可能也喜欢:
- 微信小程序跳一跳在哪里可以找到(查看微信小程序跳一跳的位置)
- 如何在小程序中的每篇文章中插入链接?(如何为小程序添加链接)
- 小程序可以导入视频吗?(如何将小程序视频复制到U盘)
- 如何查找小程序的ID(如何查找小程序的路径)
- 如何获取小程序页面的跳转路径(跳转到微信小程序)
本文由主机参考刊发,转载请注明:如果小程序文字溢出,如何显示为省略号(小程序文字设置) https://zhujicankao.com/123860.html
评论前必须登录!
注册