小程序中当rich-text中数据较多时就会出现溢出的现象 如下

此时的页面效果并不是很理想 我们可以在数据中给个div

<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis">55555555555555555555555555555555555</div>

加入  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;三个属性解决溢出问题

但这不是很好,如果数据从后台来 上面方法就需要变通一下

如下

<rich-text nodes="<div style='overflow:hidden;white-space:nowrap;text-overflow:ellipsis;'>{{html}}</div>" bindtap="tap"></rich-text>

直接在nodes中包一个div给上属性,这样的话不管后台传的是什么,只要溢出都会显示三个点

微信小程序中rich-text文本溢出(三个...)的更多相关文章

  1. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  2. 去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

  3. 微信小程序中显示html富文本的方法

    微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...

  4. 微信小程序中转义字符的处理

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理 ...

  5. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  6. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  7. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  8. 微信小程序中target与currentTarget

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...

  9. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  10. 如何在微信小程序中使用字体图标

    微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格 ...

随机推荐

  1. NC16122 郊区春游

    题目链接 题目 题目描述 今天春天铁子的班上组织了一场春游,在铁子的城市里有n个郊区和m条无向道路,第i条道路连接郊区Ai和Bi,路费是Ci.经过铁子和顺溜的提议,他们决定去其中的R个郊区玩耍(不考虑 ...

  2. STC89C52驱动MAX7219LED点阵级联, 文字滚动效果

    级联下的传值方式 级联下, N个MAX7219相当于组成了一个8*N bit宽度的锁存器, 如果需要对第M个7219进行写入, 需要做M次寻址+写入后拉高CS, 才能到达这个7219. 如果仅仅对这个 ...

  3. 基于keras的时域卷积网络(TCN)

    1 前言 时域卷积网络(Temporal Convolutional Network,TCN)属于卷积神经网络(CNN)家族,于2017年被提出,目前已在多项时间序列数据任务中击败循环神经网络(RNN ...

  4. 最简最快了解RPC核心流程

    本文主要以最简易最快速的方式介绍RPC调用核心流程,文中以Dubbo为例.同时,会写一个简易的RPC调用代码,方便理解和记忆核心组件和核心流程. 1.核心思想 RPC调用过程中,最粗矿的核心组件3个: ...

  5. centos7.5 hadoop NAT 静态IP网络环境搭建

    1 设置 VMware 网络环境 1. 选择VMNet8 并将子网IP 修改为 192.168.10.0,保证集群ip都在这个网段下 2. 选择NAT 设置,配置NAT的网关为 192.168.10. ...

  6. 2020-11-18 原生js实现自动打字效果

    原理 使用定时器,对要输出的文字进行遍历,每遍历一次,都增加一个字以及在段尾加上"|"暗示别人正在打字. js代码 const fangWrite = (theString, qu ...

  7. Taurus.MVC WebMVC 入门开发教程2:一个简单的页面呈现

    前言: 在上一篇中,我们了解了如何下载.配置和运行 Taurus.MVC WebMVC 框架. 现在,让我们开始编写一个简单的页面并进行呈现. 步骤1:创建控制器 首先,我们需要创建一个控制器来处理页 ...

  8. 统信UOS系统开发笔记(四):从Qt源码编译安装之编译安装QtCreator4.11.2,并配置编译测试Demo

    前言   上一篇已经从Qt源码编译了Qt,那么Qt开发的IDE为QtCreator,本篇从源码编译安装QtCreator,并配置好构建套件,运行Demo并测试.   统信UOS系统版本   系统版本: ...

  9. 06-Redis系列之-哨兵(Redis-Sentinel)和集群详解和搭建

    主从架构高可用 主从架构存在的问题 主从复制,主节点发生故障,需要做故障转移.(可以手动转移:让其中一个slave变成master) 主从复制,只有主写数据,所以写能力和存储能力有限 总结:redis ...

  10. 【Azure 存储服务】Blob中数据通过Stream Analytics导出到SQL/Cosmos DB

    问题描述 Json格式的数据目前是存储在Azure Blob中,如何将这些数据Load到Sql DB和CosmosDB中呢? 测试方案 使用Azure流分析服务(Stream Analytics)功能 ...