当前位置: 首页 > news >正文

解决微信小程序中 ‘nbsp;‘ 空格不生效的问题

在微信小程序开发中,我们经常会使用   来表示一个空格。这是因为在 HTML 中,空格会被解析为一个普通字符,而不会产生实际的空白间距。而   是一种特殊的字符实体,它被解析为一个不可见的空格,可以在页面上产生真正的空白间距。但是会遇到   空格不生效的问题,本文将介绍解决方法。

小程序  

问题复现

以下代码在微信小程序中运行,会发现   空格不生效,会把   这几个字符原原本本的显示出来。

<view>这是一行文本 &nbsp;&nbsp;&nbsp;&nbsp; 这里需要展示四个空格</view>

解决方法

view 组件换成 text 组件,并加上属性:decode="true" 即可解决问题。

<text decode="true">这是一行文本 &nbsp;&nbsp;&nbsp;&nbsp; 这里需要展示四个空格</text>

Bug & Tip

  1. tip: decode可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
  2. tip: 各个操作系统的空格标准并不一致。
  3. tip: text 组件内只支持 text 嵌套。
  4. tip: 除了文本节点以外的其他节点都无法长按选中。
  5. bug: 基础库版本低于 2.1.0 时, text 组件内嵌的 text style 设置可能不会生效。

参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/text.html


欢迎访问:天问博客

相关文章:

  • pcl-3 pcl结合opencv做svm分类(法向量特征数据)
  • WPF仿网易云搭建笔记(1):项目搭建
  • Navicat 技术指引 | 适用于 GaussDB 分布式的调试器
  • Fabric 画布缩放、拖动、初始化大小
  • kubernetes的服务发现(二)
  • (env: Windows,mp,1.06.2308310; lib: 3.2.4) uniapp微信小程序
  • 【S32DS报错】-3-提示J-Link GDB Server failed:Device name ‘S32K344‘ not recognised错误
  • 【CSP】202303-2_垦田计划Python实现
  • 图论——最小生成树
  • 黑马头条数据管理平台项目总结
  • Gateway:微服务架构中的关键组件
  • IntelliJ idea卡顿解决,我遇到的比较管用的方案
  • MindOpt APL:一款适合优化问题数学建模的编程语言
  • 集简云 x 零售企业丨快速集成有赞商城和微盛企微管家,实现私域运营自动化
  • Vue2学习(组件的使用)
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • android图片蒙层
  • Phpstorm怎样批量删除空行?
  • React-Native - 收藏集 - 掘金
  • ubuntu 下nginx安装 并支持https协议
  • WordPress 获取当前文章下的所有附件/获取指定ID文章的附件(图片、文件、视频)...
  • 高度不固定时垂直居中
  • 基于遗传算法的优化问题求解
  • 类orAPI - 收藏集 - 掘金
  • 罗辑思维在全链路压测方面的实践和工作笔记
  • 浅谈Golang中select的用法
  • 如何合理的规划jvm性能调优
  • 我是如何设计 Upload 上传组件的
  • Mac 上flink的安装与启动
  • Prometheus VS InfluxDB
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • #include到底该写在哪
  • #NOIP 2014# day.1 生活大爆炸版 石头剪刀布
  • #Spring-boot高级
  • (04)odoo视图操作
  • (11)工业界推荐系统-小红书推荐场景及内部实践【粗排三塔模型】
  • (javascript)再说document.body.scrollTop的使用问题
  • (NSDate) 时间 (time )比较
  • (二十一)devops持续集成开发——使用jenkins的Docker Pipeline插件完成docker项目的pipeline流水线发布
  • (附源码)springboot车辆管理系统 毕业设计 031034
  • (南京观海微电子)——I3C协议介绍
  • (转)ABI是什么
  • .babyk勒索病毒解析:恶意更新如何威胁您的数据安全
  • .NET Remoting Basic(10)-创建不同宿主的客户端与服务器端
  • .Net Remoting(分离服务程序实现) - Part.3
  • .NetCore项目nginx发布
  • .NET企业级应用架构设计系列之结尾篇
  • .net实现头像缩放截取功能 -----转载自accp教程网
  • .sys文件乱码_python vscode输出乱码
  • [ vulhub漏洞复现篇 ] Apache Flink目录遍历(CVE-2020-17519)
  • [CQOI 2010]扑克牌
  • [Hive] 常见函数
  • [ITIL学习笔记]之事件管理(2)
  • [javascript]Tab menu实现
  • [js] 正则表达式