小程序文本溢出省略号-微信小程序富文本解析

复制

多行文本显示为省略号

仅用 HTML 和 CSS 很难实现不需要显示为省略号的多行文本。 通常我们可以使用JS辅助来实现。 请参阅以下示例：

HTML5学堂：本文当中我们主要为大家讲解如何实现文本超出显示为省略号；同时讲解一下，在网页开发与制作的时候，我们什么时候应该考虑内容撑开宽高，又应该在何时考虑文本超出的问题。

复制

基本原理很简单：通过innerHTML获取元素的内容，然后使用string方法截取，截取前49个字符小程序文本溢出省略号，然后在49个字符后接一个“...”，最后小程序文本溢出省略号，截取的字符赋值即可原始元素内容的字符串。

何时考虑超越隐藏

通常，在考虑后台对前端的影响时，需要对多余部分进行处理。 很多时候数据都是从后台传到前端页面的，所以有时候会有些地方内容多，有些地方内容少。 针对这种情况，我们做一个简单的安排：

1 对于img元素的父标签，需要设置成hidden之外；

2 对于列表页的标题和内容描述，一般需要设置为超出。 多行内容描述部分需要设置超出隐藏； 单行列表页标题可以设置为超出隐藏或超出显示为省略号；

3 内容页的标题和内容，不要随意设置固定高度，也不要设置到隐藏之外。

本文共耗时1.5小时，责任编辑：HTML5学堂-丽丽。