Css:让“\n”生效

·  阅读 1003

问题描述

使用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聊天输入框,仅输入文字,需要支持换行。
  • 只粘贴纯文本的输入框

参考文档

blog.csdn.net/Leon_940002…

分类:
前端
标签: