前端处理换行和空格方法大全

731 阅读2分钟

前言

换行和空格的处理也是我们日常开发中经常需要处理的输入输出内容,今天正好又涉及这方面,所以在此对前端日常设计到的空格和换行的处理方法做个总结,有需要的朋友也可参考学习。

1.html标签内如何输入空格

如div、span、p标签我们应该如何在标签内输入空格呢?这里分为2种情况:

  1. 一个空格间隙:我们可以直接使用键盘键入一个空格即可,键入多个空格同样显示一个空格
  2. 多个空格间隙:& + n + b + s + p +;
<p>这是一个p段落内容&nbsp;&nbsp;&nbsp;&nbsp;中间插入4个空格</p>

2.html标签内输入换行

这个最简单的,使用html自身标签 : <br />

3.js设置标签内容空格和换行

  • white-space: pre-wrap
  • 字符串内容直接键入空格
  • 换行:\n
<p id="p1"></p>
const p1 = document.getElementById('p1');
p1.style = 'white-space: pre-wrap;'
p1.innerText = '啊啊啊啊     12122\n另一行'

4. 前端输入控件input与textarea

  • input可以直接输入空格,但不支持换行
  • textarea可直接键入空格和换行

在输入的内容中,\n表示换行, 表示空格

5. jsx支持空格和换行显示

  • 元素设置style:white-space: pre-wrap
  • {}内即可显示带有换行\n和空格的字符串内容

6. vue模版语法中显示换行和空格

在vue的模版语法文本插值{{}}里面默认将换行\n作为一个空格显示,而不会换行。两种方法可以解决:

  1. 使用指令v-html,将字符串里面的换行符号\n替换为<br/>,然后作为interHtml显示
  2. 设置white-space: pre-wrap,{{str}}即可换行显示。

7.最后

希望能够帮助到有需要的朋友,欢迎大家支持点赞。