4种前端处理文本换行展示
MoXinXueWEB 2024-07-05 16:33:06 阅读 96
序:
后端传递了一大段包含了回车符的文本内容,前端展示的时候所有文字堆在一起,没有换行展示。以下方法中content为后端返回的文本内容
方法一:
“↵”符号在html中会识别别为\r,\n等转义字符,所以我们可以使用\r\n去替换(.replace(/(\r\n|\n|\r)/gm, ’< br />'))
存在英文**<>**不显示
<code><div v-html="content.replace(/(\r\n|\n|\r)/gm, '<br />')"></div>code>
方法二:
使用
标签, 它会自动识别和处理后台返回的换行符号
<pre>{
{content }}</pre>
方法三:
white-space样式
上一篇: 用前端写一个网页(新手必看)
下一篇: The value of the ‘Access-Control-Allow-Origin‘ header in the response 关于后端配置允许跨域后前端请求依然失败得不到响应的问题
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。