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

原文链接：https://blog.jijian.link/2020-10-22/css-pre/

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

常规方法

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

弊端：不够简洁！

 

pre 标签实现

弊端：超出容器 pre 标签并没有按照理想方式换行显示！

 

css 样式实现

<div
  style="
    width: 200px;
    background-color: #999;
    color: #000;
    white-space: pre-wrap;
    word-wrap: break-word;
  "
>测试文本1
  测试文本2
    测试文本3
  测试文本4
    测试文本555555555555555555555555555</div>

结合了 `white-space: pre-wrap; word-wrap: break-word;` 的css属性之后，会完美保留空白字符与换行符，并且会正常换行。示例效果参考原文：https://blog.jijian.link/2020-10-22/css-pre/