Css:让“\n”生效

问题描述

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