用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>