import {RichText} from '@tarojs/components';
let content = 'Hello World';
const specialChars = /<|>|&/g;
const specialCharsMap = {
'<': '<',
'>': '>',
'&': '&'
};
function escapeSpecialChars(str) {
return str.replace(specialChars, char => specialCharsMap[char]);
}
content = escapeSpecialChars(escapeSpecialChars); // 特殊符号会报错, 需转义
['H', 'e'].forEach(item => {
const reg = new RegExp(item, 'g');
content = content.replace(reg, `<span style="color: #468DF7;">${item}</span>`);
});
<RichText
style="word-wrap: break-word;word-break: break-all;" :nodes="dataForm.richtContent" // 解决富文本不能换行问题
className={style.rich_text} nodes={content} />
.rich_text {
/* 设置元素高度自适应 */
height: auto;
/* 设置超过四行用省略号显示,IOS一定要这富文本内写这个超出隐藏 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* 显示的行数 */
-webkit-box-orient: vertical;
/* 解决富文本不能换行问题 */
word-wrap: break-word;
word-break: break-all;
white-space: pre-line; // 这个是换行
}