简简单单一行代码实现textarea内容原样输出，与微博展示效果类似

写在最前

最近在做一个项目，碰到一个问题，其应用场景十分常见，类似于发微博的效果。

问题

比如我在编辑时：

在内容编辑时，使用简单的 <textarea> 进行内容的获取，其中添加分段、空格等样式。

需求

我需要将编辑的内容原样展示，如果一行内容过多时，进行自动换行处理，且可以实现 \n 的手动换行

比如这样展示：

解决方案

1. 使用 <pre> 标签

   <pre> 标签可定义预格式化的文本。

   被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

   但是有个问题，该标签是无法实现自动换行的，当填写的内容过多时，它仍然在一行展示，将会出现滚动条，这并不是我所想要的效果。

   此时可以看我的第二个方案。只需一行代码即可实现该效果。

2. 使用 <div> 标签

   <div class="content">第一行内容\n第二行内容\n第三行内容\n<div>
   

   添加样式如下：

   .content{
   	white-space: pre-line;
   }
   // 如果需要给他限制最大高度时，可使用如下代码：
   .content{
   	max-height: 350px;
       overflow: auto;
       white-space: pre-line;
   }
   

   轻松一行代码即可实现该发布效果。

   补充：
   考虑到会有英文的情况，如果担心不会实现自动换行的话，可以加上这个属性：word-wrap: break-word;

   .content{
       max-height: 350px;
       overflow: auto;
       white-space: pre-line;
   }
   

写在最后

✨$原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$