HTML页面中保留空格和换行符

一、背景

最近在做react项目，ui用的antd，看了上图的需求后，这不就是list组件么，用上就是了。额？显示不出原有的换行符。。。 查了list的源码，是给什么显示什么，不会保留空格和换行符。

于是，脑海里闪现pre标签。

二、pre标签的定义和用法

1. 可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为 等宽字体（字符宽度相同的电脑字体）。

2. 常见应用是用来表示计算机的源代码。

       ps:如果您希望使用该标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 "<" 代表 "<"，">" 代表 ">"，"&" 代表 "&"。

三、pre标签上手

代码如下：

显示如下：

右边超出了div的宽度居然不换行了。怎么才能换行呢？ 查了下浏览器pre默认属性:

white-space????是处理元素内空白的属性，瞧瞧去：

有个pre-wrap，保留空白符序列，但是正常地进行换行，就它了。

终于好看了！

四、不得不说的code

提到pre，肯定离不开code。那么code 标签是干嘛的呢？

需要显示多行的话需配合pre使用。

五、code和pre区别

• code标签用于表示计算机源代码或者其他机器可以阅读的文本内容，暗示浏览器可以做出自己的样式处理，pre标签则没有这项功能。
• code只能显示一行代码

• code标签和pre标签是可以嵌套使用的，但是必须注意两者的嵌套顺序。

转载于:https://juejin.im/post/5b86477c51882527fd2bfa19