本文介绍: 识别文本中的n 进行换行,在项目中碰到这样的情况,需要渲染文本写入内容,在编辑文本域时换行得到的文本就有了n,如果直接渲染的话无法实现换行。

项目中碰到这样的情况,需要渲染文本域写入的内容,在编辑文本域时换行得到的文本就有了n,如果直接渲染的话无法实现换行。

下面提供三种换行方式

1.先使用正则将n替换成<br/>标签,再用vhtml渲染

this.text = res.data.replace(/n/g,'<br>')
<div v-html="text"&gt;</div>

2.通过css的whitespace 实现推荐使用

<div style="white-space: pre-wrap;">{{text}}</div>

 3.使用pre标签

<pre> 标签定义格式化的文本,被包围在 <pre> 标签 元素中的文本通常会保留空格换行符

 <pre>{{text}}</pre>

使用<pre>标签 可以识别n进行换行 但是不推荐使用

如果文字太长的一行可能会撑开固定宽度容器或者超出容器范围

可以看一下whitespace各种值的行为 对比一下preprewrap

 

原文地址:https://blog.csdn.net/m0_49623851/article/details/128488156

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_22144.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注