css 保留后端 textarea 中的换行与空格字符

时间：

分类：

css

字数：

581 字

时长：

大约需要 2 分钟

次数：

0 人阅读

如果后台使用 textarea 输入内容，在前段显示需要保留换行符与空白字符，该如何做？

常规方法

替换换行符为 <br> 标签，替换空白字符为 &nbsp;，再输出到要显示的位置

js 表示方式：

1
2
3
`11111
22222  2222`.replace(/(\r\n|\r|\n)/img, '<br>').replace(/\s/img,'&nbsp;');
// output: 11111<br>22222&nbsp;&nbsp;2222

以上方法也能满足需求，但是不够简洁！

pre 标签实现

MDN介绍：HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

1
2
3
4
5
6
7
<pre style="width: 200px; background-color: #999; color: #000;">
测试文本1
  测试文本2
    测试文本3
  测试文本4
    测试文本5
</pre>

显示效果如下：

测试文本1
  测试文本2
    测试文本3
  测试文本4
    测试文本5

看起来好像并没有什么问题，但是如果内容过长，显示就成这样了：

测试文本1
  测试文本2
    测试文本3
  测试文本4
    测试文本555555555555555555555555555

超出容器 pre 标签并没有按照理想方式换行显示，这是为毛原因？如何做才能让 pre 标签正常换行呢？

从 chrome 控制台可以看到 pre 标签有预设样式：

1
2
3
4
5
6
pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

基于 chrome 的预设样式，可以写我们自己的 css 来实现保留换行符与空白字符。

css 样式实现

1
2
3
4
5
6
7
8
9
10
11
12
13
<div
  style="
    width: 200px;
    background-color: #999;
    color: #000;
    white-space: pre-wrap;
    word-wrap: break-word;
  "
>测试文本1
  测试文本2
    测试文本3
  测试文本4
    测试文本555555555555555555555555555</div>

显示效果：

测试文本1 测试文本2 测试文本3 测试文本4 测试文本555555555555555555555555555

以上可以完满实现保留换行符与空白字符的需求！

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2020-10-22/css-pre/

如果您觉得文章不错，可以点击文章中的广告支持一下！