uni-app中rich-text组件在app端无法显示连续空格

uni-app中rich-text组件在app端无法显示连续空格

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

12313      45646456

操作步骤：

12313      45646456

预期结果：

12313      45646456

实际结果：

12313 45646456

bug描述：

html文本中 示例: 12313 45646456; 含有多空格符，但是只生效一个，有解决办法吗


更多关于uni-app中rich-text组件在app端无法显示连续空格的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这不是bug哦，文档里写了app暂时不支持显示连续空格，后续会优化。 解决方案：在style中添加 white-space:pre;

更多关于uni-app中rich-text组件在app端无法显示连续空格的实战教程也可以访问 https://www.itying.com/category-93-b0.html


应该是white-space: pre-wrap;要不就不换行了！！！！

在uni-app中，rich-text组件在APP端确实会合并连续空格。这是由于底层WebView对HTML的解析处理导致的。以下是解决方案：

  1. 使用HTML实体代替空格：
<rich-text :nodes="'12313&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;45646456'"></rich-text>
  1. 使用CSS的white-space属性（需配合div使用）：
<rich-text :nodes="'<div style=\"white-space: pre;\">12313      45646456</div>'"></rich-text>
  1. 使用pre标签包裹内容：
<rich-text :nodes="'<pre>12313      45646456</pre>'"></rich-text>
回到顶部