小程序中当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. NC51111 Atlantis

    题目链接 题目 题目描述 There are several ancient Greek texts that contain descriptions of the fabled island At ...

  2. NC15688 Operating System

    题目链接 题目 题目描述 在学习Operating System的过程中,Glory遇到了这样一个问题,现在有一个大小为可以容纳N个页面的内存,硬盘内的内容被分成M个页面,用1~M来标识,一开始内存里 ...

  3. ARP(Address Resolution Protocol) Packet

    Address Resolution Protocol The Address Resolution Protocol (ARP) is a communication protocol used f ...

  4. 贝壳云P1刷机记录(5.10内核Armbian)

    说明 贝壳云基于瑞芯微的RK3328芯片, 芯片介绍, Cortex-A53架构, 4核, 1G内存, 8G eMMC. 板载1个千兆网口, 4个USB3.0. 这个盒子比较赞的地方就是不到百元的价格 ...

  5. spring boot读取json文件并实现接口查询

    0.源码下载 https://download.csdn.net/download/IndexMan/84238085 1.说明 最近需要在spring boot项目启动时读取json文件并保存到Li ...

  6. Java开发技巧杂记

    杂记一 创建项目的spring initializr,要求是创建spring boot3.0,且不在支持java8语言,且要求语言大于17,所以创建项目时,无法创建srping2.0项目了:如果要创建 ...

  7. Redis集群单机环境搭建

    概述 目标:在单台物理机上搭建3主3从共6个节点的Redis集群. 版本:Redis 6.2.4 系统:Ubuntu 18.04 Desktop(IP地址:192.168.100.247) 准备工作 ...

  8. Mysql 插入timestamp没有使用默认值问题

    在一次升级过程中,发现Mysql插入数据报了个错 Column 'create_time' cannot be null. 但是看了下这个字段虽然是非null,但是是有默认值的 `create_tim ...

  9. 【生成对抗网络学习 其二】GAN（keras实现）代码阅读笔记

    想来想去还是记录一下吧,主要是怕以后时间长忘了 好记性不如烂笔头 代码来自eriklindernoren的开源GAN实现:https://github.com/eriklindernoren/Kera ...

  10. 【Azure Redis 缓存】Redis 连接失败

    问题描述 Azure Redis 出现连接失败,过一会儿后,又能自动恢复. 问题解答 其实,因为Azure Redis服务一直都有升级维护的操作(平均每月一次),Redis服务更新是平台自动进行的计划 ...