vue3 中保留文本中空格和换行 white-space: pre-wrap

于 2024-03-04 11:48:56 发布
阅读量612 收藏 8
点赞数 7
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ll307748784/article/details/136448139
版权

我们打一个比方说后端传入的文本是有空格换行的时候我们想进行复原显示的话

我们添加了style = "white-space: pre-wrap" 这个属性的时候 文本内的换行符（如 \n 或 <br> 标签）也会被保留，并且会在这些位置换行

 <div  style = "white-space: pre-wrap"> {{"&nbsp&nbsp&nbsp&nbsp&nbsp"+introduction}}
 </div>

效果如下:

火箭起飞咯
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 文本出现空格转换为换行显示
一碗清深的博客
11-29 420
日期和时间分别换行显示示例
vue-dom-hints:Vue devtool，用于在DOM中标识Vue组件及其SFC路径
05-01
:light_bulb: 提示提示 通过__vue__属性在DOM中添加开发提示的Vue开发__vue__ 即时识别DOM中的所有Vue组件及其在代码库中的位置 :person_raising_hand: 为什么？ :glowing_star: 与浏览器无关的最小替代品！ :woman_detective: 无需再猜测只需检查DOM即可轻松识别Vue组件！ :fire: 更快的调试快速确定SFC路径并开始调试！ :high_voltage: 专家提示：在Chrome DevTools中，检查带有hint属性的元素， $0.__vue__在控制台中输入$0.__vue__ ，以进入视图模型并检查状态。 :rocket: 安装 npm i vue-dom-hints :vertical_traffic_light: 设置 将其作为安装到Vue： import DomHints from 'vue-dom-hints' Vue . use ( DomHints ) 在构建中将其禁用以进行生产： if ( process . env . NODE_ENV !== 'pr
vue去掉所有输入框两边空格，封装指令去空格，支持Vue2和Vue3，ElementUI Input去空格
最新发布
阿飞
08-08 4511
解决Vue v-model.trim 去空格问题， 让你的Input轻松去掉两边空格，支持原生，支持Element UI 的Input，支持 TextArea, Vue2,Vue3
vue3去除字符串前后空格
qq_43393995的博客
01-06 1402
数据进行分割之后会有空格，可以用下面方法去处理，在调用的时候我默认把角色id转换成字符串去处理的，运用正则去满足trim的使用。仅此记录，感觉蛮实用的。
VUE+element Input框 实现输入内容可自适应文本高度，换行（空格换行，enter发送）阻止文本域的回车事件
蓝胖子的博客
07-19 5136
VUE+element Input框 实现输入内容可自适应文本高度（空格换行，enter发送）阻止文本域的回车事件
(vue)文本间空格占位符
m0_49471668的博客
11-11 1145
&#32; == 普通的英文半角空格 &#160; == &nbsp; == &#xA0; == no-break space （普通的英文半角空格但不换行） &#12288; == 中文全角空格 （一个中文宽度） &#8194; == &ensp; == en空格 （半个中文宽度） &#8195; == &emsp; == em空格 （一个中文宽度） &#8197; == 四分之一em空格 （四分之一中文宽度） 相
vue3过滤输入框首尾空格
weixin_45563734的博客
08-04 887
【代码】vue3过滤输入框首尾空格。
Vue插值文本换行问题
weixin_30387423的博客
07-06 1009
问题背景： 后端返回的字符串带有\n换行符，但Vue将其插值渲染成div内部文本后，文本并不换行，换行符显示为一个空格。 目标： 让文本在换行符处换行。 解决方法： 思路：实现文本换行有两种方法，一是HTML方法，即<br>标签；二是CSS方法，即white-space属性。 方法1.使用v-html 首先，将字符串里的\n替换为<br>，...
Vue3+ElementPlus 自定义全局指令过滤输入框前后空格
朝花夕拾的博客
05-31 924
【代码】Vue3+ElementPlus 自定义全局指令过滤输入框前后空格。
vue文本识别 “ \n ” 的换行问题
热门推荐
甜心的专栏
09-05 1万+
在 vue 项目，有时请求返回的数据中会有含有 \n 的字符串，如果直接渲染的话无法实现换行。一、通过 css属性 实现：设置 white-space: pre-wrap;二、使用v-html实现：首先，将字符串里的 \n 替换为 ，然后用 v-html 指令渲染字符串为 innerHTML 。三、标签：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
详解vue中v-bind:style效果的自定义指令
10-15
主要介绍了vue中v-bind:style效果的自定义指令，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
vue3-icon-picker：Vue3项目的绝佳图标选择器
03-04
Vue3图标选择器 Vanilla Js版本是由很棒的人在这里开发的-https: 由移植到Vue3 :) 查看的演示:) 如何建造 git clone https://github.com/hasinhayder/vue3-icon-picker.git cd vue3-icon-picker yarn yarn dev ...
v-tooltip:Vue 3的工具提示
03-20
v工具提示 Vue 3工具提示自定义指令目录安装将tooltip.js粘贴到您的src文件夹中，为了清楚起见，我亲自在其中创建了文件夹directives 。下一步是将tooltip.css粘贴到assets文件夹中。拥有所有文件后，打开main.js...
vue-white-dashboard：Creative Tim的Vue White控制台
01-30
Vue White仪表板是一个漂亮的...目录版本号 Vue Laravel演示版首页用户个人资料页面表格页面 地图页面通知页面RTL页面快速开始克隆仓库： git clone https://github.com/creativetimofficial/vue-white-dashboar
vueuse-vue3-example:VueUse和Vue3工作示例
05-06
VueUse Vue3示例 + 的 :globe_with_meridians: :package: :package:安装克隆此存储库yarn yarn dev 在浏览器中打开执照
flowchart-vue:Vue.js的流程图和设计器组件
05-05
Vue.js的流程图和流程图设计器组件（React.js的）。 English | 用法 yarn add flowchart-vue < button type = " button " @ click = " $refs . chart . add ({id : + new Date (), x : 10 , y : 10 , name :...
vue-toaster:Vue 3的Vue.js Toast通知插件
05-23
yarn add @meforma/vue-toaster # npm npm install @meforma/vue-toaster 进口 // In you main.js // ... considering that your app creation is here import Toaster from "@meforma/vue-toaster" ; createApp ( ...
vue设置 white-space: pre-wrap后上面留有空行
06-11
如果在Vue中设置了white-space: pre-wrap，但仍然在文本上方留有空行，可能是因为在渲染模板中存在空格或换行符。可以尝试使用以下方法解决该问题： 1. 在模板中删除空格或换行符。 2. 将white-space: pre-wrap应用于更小的元素，例如span或p，而不是整个文本块。 3. 使用CSS的margin或padding属性来调整文本块的上下间距。 如果以上方法无法解决问题，请提供更多代码和上下文信息，以便我更好地理解问题并提供更准确的解决方案。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值