美文网首页
vue文本识别 “ \n ” 的换行问题

vue文本识别 “ \n ” 的换行问题

作者: 蓦然回味 | 来源:发表于2023-03-06 17:32 被阅读0次

在 vue 项目,有时请求返回的数据 中会有含有 \n 的字符串,如果直接渲染的话无法实现换行。

一、通过 css属性 实现

设置 white-space: pre-wrap;  代码如下:

 <div style="white-space: pre-wrap;">{{含有\n的字符串}}</div>

扩展:

white-space属性值:

值                                描述

normal                         默认。空白会被浏览器忽略。

pre                               空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap                        文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

pre-wrap                      保留空白符序列,但是正常地进行换行。

pre-line                        合并空白符序列,但是保留换行符。

inherit                          规定应该从父元素继承 white-space 属性的值。

二、使用v-html实现

首先,将字符串里的 \n 替换为 <br>,然后用 v-html 指令渲染字符串为 innerHTML 。 代码如下:

// JS部分

 this.text = res.data.replace(/\n/g,'<br>')

 // HTML部分

 <div v-html="text"></div>

三、<pre>标签

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。代码如下:

 <pre>{{含有\n的字符串}}</pre>

注意:在选择<pre>标签时,如果文字太长的行可能会撑开固定宽度的容器或者超出容器范围。解决方法:

 pre {

 //方法一:保留空白符序列,但是正常地进行换行。

   white-space: pre-wrap;

 //方法二:添加横向滚动条

   overflow-x: auto;

}

相关文章

  • html 文本换行 \n 不换行 空格无效

    文本中直接用\n ,无法换行,因为 html 不识别 \n,如果只是单纯的用replace把 \n换成 ,只能变...

  • 插值文本换行问题

    后端返回的字符串带有\n换行符,但Vue将其插值渲染成div内部文本后,文本并不换行,换行符显示为一个空格。下面是...

  • setText 换行

    textView 换行是支持"\n"换行符的。 用法是 textView.text=@"你想要输入的文本\n换行后...

  • 编程常识:换行符CR与LF

    CR(回车/r) LF(换行/n) 操作系统(不是软件)对换行的默认识别不同 window 换行为/n/r lin...

  • CSS 解决HTML中\n换行

    这样\n就能被识别,自动换行。兼容性如下:

  • Css:让“\n”生效

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

  • 解决 crlf 和 lf 不同带来的冲突问题

    crlf 和 lf 是文本换行的不同方式: crlf: "\r\n", windows 系统的换行方式 lf: "...

  • Day09预习笔记

    1:echo命令:(显示输出文本内容) -n 不换行输出 -e 支持转义字符 \t代表tab \n代表回车换行 2...

  • textarea换行符问题

    项目需求校验文本域换行问题n行 每行最多m字 思路是value.split('/n') 然后根据数组判断 但是在I...

  • Android后台控制文本显示的几种方式

    一、使用TextView 文本换行 后台使用“\n”换行符传输数据,客户端接收需进行如下转换: 富文本 后台使用H...

网友评论

      本文标题:vue文本识别 “ \n ” 的换行问题

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