uniapp如何过滤掉富文本里的overflow-wrap: break-word
时间: 2023-12-03 10:02:15 浏览: 33
可以通过在富文本渲染的时候,将其中的样式属性`overflow-wrap: break-word`过滤掉来实现。具体实现步骤如下:
1. 获取富文本内容,可以使用`uni-html-parser`库进行解析,得到一个包含富文本内容的节点树。
2. 遍历节点树,找到所有样式属性中包含`overflow-wrap: break-word`的节点,将该样式属性从节点的样式属性列表中删除。
3. 重新生成处理后的节点树,并将其渲染到页面上。
需要注意的是,由于`uni-html-parser`库解析的节点树中可能存在多层嵌套的情况,因此在遍历节点树时需要考虑到父节点和子节点之间的关系,以免漏掉某些节点。
相关问题
overflow-wrap: break-word;
overflow-wrap: break-word;是CSS属性,用于在单词边界处自动换行,以避免文本溢出容器。如果单词太长,它将在单词边界处断开,并在下一行继续。这是一种非常有用的属性,可以确保文本在不同屏幕大小和设备上都能正确显示。
<td class="text-left" style="white-space: pre-wrap; overflow-wrap: break-word;">0219885045;002;001;0279207510;0281141525;0253345104</td>加上了样式,但换行没有生效
根据您提供的代码,您已经把`white-space: pre-wrap;`加入到该单元格的样式中了,这是正确的。不过,您需要将`overflow-wrap: break-word;`替换成`word-wrap: break-word;`,因为`overflow-wrap`是CSS3中的新属性,有些浏览器不支持,而`word-wrap`是CSS2.1中定义的属性,兼容性更好,可以实现换行效果。
所以,您需要将代码修改为如下所示:
```html
<td class="text-left" style="white-space: pre-wrap; word-wrap: break-word;">0219885045;002;001;0279207510;0281141525;0253345104</td>
```
这样就可以实现文本遇到分号自动换行的效果了。