原创

了解\r\n由来与作用 并解决在html中 \r\n不识别的方案

温馨提示:
本文最后更新于 2022年08月31日,已超过 654 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

首先了解一下/r与/n

没有计算机之前,用的是电传打字机(Teletype Model 33)的设备,每秒钟可以打10个字符。但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两个字符。要是在这0.2秒里面,又有新的字符传过来,那么这个字符将丢失。于是,研究制造人员想了个办法解决这个问题,就是在每行后面加两个表示结束的字符。一个叫做“回车”,告诉打字机把打印头定位在左边界;另一个叫做“换行”,告诉打字机把纸向下移一行。

\r就是回到行首,\n就是到下一行的,但是一般我们输出程序时,看不到明显的差别的

'\r'是回车,'\n'是换行,前者使光标到行首,后者使光标下移一格。通常用的Enter是两个加起来。

一个是回车,一个是换行
ASCII码一个是10一个是13。

如果要通用的则是\r\n,因为有些编辑器不认\n

解决在html中 \r\n不识别

html 文本换行 \n 不换行 空格无效
文本中直接用 \n ,无法换行,因为 html 不识别 \n,如果只是单纯的用 replace 把 \n 换成 <br/>,只能变成普通的字符串,也还是无法换行。

解决方法有这么几种:

1. 用 innerHTML  =  " ... "  或者 v-html  来把 <br/> 识别为 html node 

2. 在标签上套一个 <pre></pre>

3. 设置 css

// 合并空白符序列,但是保留换行符。
white-space: pre-line;

同理,针对不能识别多个空格的文本,也可以用以下代码

<div style="white-space:pre">测试   要换行</div>
正文到此结束
该篇文章的评论功能已被站长关闭
本文目录