如果小程序文字溢出，如何显示为省略号（小程序文字设置）

本文介绍了百度智能小程序开发中如何将溢出的文字显示为省略号。

就目前的移动设备显示界面而言，如果文字量过长，由于屏幕宽度和高度的原因，可能无法完全显示。 为了提高用户体验，这次溢出的文本应该显示为省略号。

现在我们看看如何实现以下文本内容的行文本溢出样式：

单行文本溢出 多行文本溢出：显示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 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：如果小程序文字溢出，如何显示为省略号（小程序文字设置） https://zhujicankao.com/123860.html