当前位置: 首页 > news >正文

p标签文本段落中因编辑器换行引起的空格问题完美解决方案

目录

  • 1.修改前的代码:
  • 2.修改后的代码
  • 3.总结

在HTML文档中,如何要在(p标签)内写一段很长的文本段落,并且没有
换行。由于IDE或者编辑器界面大小有限或需要在vue中逻辑处理动态显示文本,一行写完太长,中间需要回车换一行。这时候浏览器显示的文档中就会出现一个空格。
附完美解决方案:

1.修改前的代码:

  • 可以从代码中看到p标签中进行了编辑器的换行,在页面上p标签文本内容显示的效果中每一个换行都出现了空格。
<p>测试库纪念碑谷开始那个困哪刷卡个<span v-for="(item, index) in 10" :key="index">如果</span>13213213这里编辑器也换行策划四u供货华编辑器换行</p>
  • 页面中的显示效果:

在这里插入图片描述

2.修改后的代码

  • 修改后的代码:
<p><span>测试库纪念碑谷开始那个困哪刷卡个</span><span v-for="(item, index) in 10" :key="index"><span>如果</span></span><span>13213213这里编辑器也换行</span><span>策划四u供货华编辑器换行</span>
</p>
  • 修改后的页面效果:

在这里插入图片描述

3.总结

我们只需要在每次编辑器换行后的文本用span标签包裹,空格就去除了,问题完美解决。

相关文章:

  • 【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
  • WHAT - React Immer
  • QT学习(6)——QT中的定时器事件,两种实现方式;事件的分发event,事件过滤器
  • 【软件工程】计算机内存单位解析及换算
  • vue3中svg图标的封装与使用
  • 万字 | 菊花厂C语言编程10大规范
  • Python基础小知识问答系列-过滤列表元素
  • python 基础综合应用——小开发
  • Swift 定制 Core Data 迁移
  • JavaScript 原型链那些事
  • 3D鸡哥又上开源项目!单图即可生成,在线可玩
  • Spring Boot 学习第八天:AOP代理机制对性能的影响
  • 【Spring Boot 源码学习】初识 ConfigurableEnvironment
  • 数据结构(3.8)——栈的应用
  • gdb调试命令大全
  • [数据结构]链表的实现在PHP中
  • 【Linux系统编程】快速查找errno错误码信息
  • co.js - 让异步代码同步化
  • docker-consul
  • Javascript 原型链
  • jquery ajax学习笔记
  • Just for fun——迅速写完快速排序
  • laravel with 查询列表限制条数
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • Linux后台研发超实用命令总结
  • Linux学习笔记6-使用fdisk进行磁盘管理
  • OSS Web直传 (文件图片)
  • Spring Boot MyBatis配置多种数据库
  • TypeScript迭代器
  • 关于extract.autodesk.io的一些说明
  • 基于axios的vue插件,让http请求更简单
  • 基于组件的设计工作流与界面抽象
  • 开源地图数据可视化库——mapnik
  • 如何优雅地使用 Sublime Text
  • 算法系列——算法入门之递归分而治之思想的实现
  • 微信小程序:实现悬浮返回和分享按钮
  • 小程序上传图片到七牛云(支持多张上传,预览,删除)
  • 从如何停掉 Promise 链说起
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • ​TypeScript都不会用,也敢说会前端?
  • #《AI中文版》V3 第 1 章 概述
  • #mysql 8.0 踩坑日记
  • #前后端分离# 头条发布系统
  • #中的引用型是什么意识_Java中四种引用有什么区别以及应用场景
  • $var=htmlencode(“‘);alert(‘2“); 的个人理解
  • (C语言)求出1,2,5三个数不同个数组合为100的组合个数
  • (Matlab)使用竞争神经网络实现数据聚类
  • (二)Linux——Linux常用指令
  • (附源码)springboot家庭装修管理系统 毕业设计 613205
  • (附源码)计算机毕业设计SSM疫情下的学生出入管理系统
  • (学习日记)2024.03.25:UCOSIII第二十二节:系统启动流程详解
  • (一)硬件制作--从零开始自制linux掌上电脑(F1C200S) <嵌入式项目>
  • .java 指数平滑_转载:二次指数平滑法求预测值的Java代码
  • .NET 5种线程安全集合
  • .NET Core日志内容详解,详解不同日志级别的区别和有关日志记录的实用工具和第三方库详解与示例