原创

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

温馨提示：

本文最后更新于 2022年08月31日，已超过 275 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。

首先了解一下/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>

正文到此结束

所属分类：前端

本文标签： 前端 Html 其他
本文链接： http://www.92cxy.cn/article/32
版权声明： 本文由王小东原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

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

首先了解一下/r与/n

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

热门推荐

相关文章

说给你听

本文目录

热门标签

近期评论

网站信息

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

首先了解一下/r与/n

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

热门推荐

相关文章

说给你听

本文目录

热门标签

近期评论

网站信息

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