前端回车(换行)显示成空格

请求到的字符串渲染到html页面,换行通常没有我们想要的换行效果 ,除非你把字符串放在<pre>标签中 ,这是因为文本中的回车是'\n''\n\r',而html中的回车是<br />

但是<pre>标签通常会出现一个致命的问题,在手机端没法响应式(responsive)的显示,我的解决方法是添加white-space属性。

<p style="white-space: pre-line">
  {{text}}
</p>

关于white-space用法: https://www.w3school.com.cn/cssref/pr_text_white-space.asp

发表评论

电子邮件地址不会被公开。 必填项已用*标注