JS中如何输出空格

源自：2-1 JavaScript-输出内容（document.write）

JS中如何输出空格

在写JS代码的时候，大家可以会发现这样现象:

document.write("   1      2                3  ");
结果: 1 2 3

无论在输出的内容中什么位置有多少个空格，显示的结果好像只有一个空格。

这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。

解决方法:

1. 使用输出html标签 来解决

 document.write("&nbsp;&nbsp;"+"1"+"&nbsp;&nbsp;&nbsp;&nbsp;"+"23");
 结果:  1    23

2. 使用CSS样式来解决

 document.write("<span style='white-space:pre;'>"+"  1        2    3    "+"</span>");
 结果:  1       2     3

在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"

提问者：小于飞飞 2015-03-11 15:13

个回答

慕桂英6859165

2018-06-29 09:29:36

正则/\s/

0
qq_一个人的路上_0

2017-08-15 09:13:52

如果想要输入一个中文空格，就是占用一个中文字符的长度，可以在全角输入模式下输入一个空格，同样输入的全角空格可以复制，这对代码的编写量可以减少很多，也更美观

2
慕粉0022061664

2017-06-07 08:57:58

不错哦

0
qq_六月_9

2017-04-13 17:07:16

f非常感谢，实现了我想要的结果，最核心的一点就是给 span 设置 style='white-space:pre;'

4
幸福是可积的

2017-03-17 14:01:45

<a href="#">会有效果吗?</a>

1
Blizzard_lihe

2016-09-02 10:22:36

这个哥是我在imooc上学习时间最长的，流弊

0
无敌小哥儿

2016-04-03 18:32:49

矮油，不错哦

1
_raxxar_

2016-01-10 13:06:27

很好，不错，支持！

0
慕課君

2015-12-30 16:46:49

运用转义字符，“\v” 实现空格，有问题，找男神，男神给你溜肥肠。

3
jshacker007

2015-11-17 17:52:30

问题很好的

0
huliyichen

2015-08-29 18:52:22

JS主要是实现网页上的特效效果的，CSS样式是表现，HTML是网页内容的载体，在制作网页时，要把三者结合起来使用，由于浏览器显示机制的作用，空格是不起作用的，可以通过 标签或CSS样式输出空格。
CSS样式：document.write("<span style="whitespace">" + 要输出的内容 + “</span>”)内嵌式方式

16
luona

2015-08-11 18:16:19

厉害啊

1
陈艳

2015-06-18 15:52:12

厉害！

1
等你到头发花白

2015-06-03 19:20:08

 

3
UI设计师_子韬

2015-05-10 00:32:03

做一名有内涵的设计师

2

UI设计师_子韬: 2015-05-10 00:31:06

 <a href="http://weibo.com/227193223>做一名有内涵的设计师</a>

UI设计师_子韬

2015-05-10 00:29:51
```
 做一名有内涵的设计师
```
0
UI设计师_子韬

2015-05-10 00:29:11

不错支持

0
慕雪3193510

2015-03-11 16:18:24

document.writeln("")会自动加上空格做为间隔

0