您的位置:首页 > 新闻 > 热点要闻 > p标签文本段落中因编辑器换行引起的空格问题完美解决方案

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

2024/10/5 13:57:40 来源:https://blog.csdn.net/whs15193553607/article/details/140147325  浏览:    关键词: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标签包裹,空格就去除了,问题完美解决。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com