textarea如何在展示时候显示多个空格和换行

用textarea存储到的内容，在前端如果使用div展示的话，对于换行和多余的空格默认不展示。可以通过以下两种方式进行展示。

<textare>
我是文字，我是文字，     我是文字，我是文字
我是文字
</textare>

方案1：使用样式 white-space: pre-wrap

优点： 支持空白和换行换行
缺点： 无

<style>
 .info {
    whilte-space: pre-wrap;
  } 
</style>
<div class="info">{{ textareContent }}</pre>

方案2：使用 pre 标签

用pre标签包裹存通过textarea存储的内容。

优点： 支持多个空格和换行
缺点： 无法继承font-family，需要重新定义

<style>
 .pre {
    font-family: ''Microsoft YaHei' 
  } 
</style>
<pre class="pre">{{ textareContent }}</pre>

效果