美文网首页
Css:让“\n”生效

Css:让“\n”生效

作者: merrylmr | 来源:发表于2020-10-11 15:06 被阅读0次

问题描述

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

相关文章

  • Css:让“\n”生效

    问题描述 使用textare,输入的文本;当存在换行(\n)、空格符的时候,显示的文本与输入框的文本显示不一致,换...

  • 常用

    1 让生产环境下css生效执行rake assets:precompile就行了2 Nginx启动 sudo /e...

  • 自适应页面的实现方式

    CSS3 媒体查询 media媒体查询技术的原理:通过匹配不同屏幕设备的特征,让不同特征下的CSS代码生效。常用匹...

  • day102

    implementation[ˌɪmpləmɛnˈteɪʃən] n.执行,履行;实施,贯彻;生效;完成;工具;仪...

  • 移动端遇到的问题

    1. 伪类 :active 生效 要CSS伪类 :active 生效,只需要给 document 绑定 touch...

  • css计算高度

    css计算高度这里要有空格。否则不生效。

  • 页面引用样式和js的缓存问题

    当css货转js修改后,测试时可能会出现修改没有生效的现象,这是页面缓存造成的,如何让资源文件修改后立即生效呢? ...

  • 2019-12-12

    element-ui首次进入页面css不生效,重新刷新才生效的问题。 页面中没有使用...

  • CSS权重

    CSS权重:1、权重决定了你css规则怎样被浏览器解析直到生效。“css权重关系到你的css规则是怎样显示的”。2...

  • HTML5中的Scoped属性

    style标记上新出现的这个scoped属性可以让CSS样式只对局部元素生效,具体说,就是存放这段style样式的...

网友评论

      本文标题:Css:让“\n”生效

      本文链接:https://www.haomeiwen.com/subject/yhdjpktx.html