问题描述
使用textare
,输入的文本;当存在换行(\n
)、空格符的时候,显示的文本与输入框的文本显示不一致,换行和空格并未生效。如下图:
<template>
<div>
text:
<p v-html="text"><p>
textarea:
<textarea v-model="text"></textarea>
</div>
</template>
想要的效果图如下:
解决方法
- pre-wrap
p {
white-space:pre-wrap;
}
- pre标签
将上面的p标签替换成pre
<pre v-html="text"><pre>
场景
- IM聊天输入框,仅输入文字,需要支持换行。
- 只粘贴纯文本的输入框
参考文档
https://blog.csdn.net/Leon_940002463/article/details/102775758
网友评论