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

如果后台使用 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/

如果您觉得文章不错,可以请我喝一杯咖啡!