JS中如何输出空格

来源:2-1 JavaScript-输出内容(document.write)

小于飞飞

2015-03-11 15:13

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

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

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

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

解决方法:

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

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

2. 使用CSS样式来解决

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

   

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


写回答 关注

19回答

  • 慕桂英6859165
    2018-06-29 09:29:36

    正则/\s/

  • qq_一个人的路上_0
    2017-08-15 09:13:52

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

  • 慕粉0022061664
    2017-06-07 08:57:58

    不错哦

  • qq_六月_9
    2017-04-13 17:07:16

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

    慕工程150...

    嗯嗯好的谢谢,这种方式,确实能正常显示 带空格的字符串了。

    2019-04-13 18:52:25

    共 2 条回复 >

  • 幸福是可积的
    2017-03-17 14:01:45

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

  • Blizzard_lihe
    2016-09-02 10:22:36

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

  • 无敌小哥儿
    2016-04-03 18:32:49

    矮油,不错哦

  • _raxxar_
    2016-01-10 13:06:27

    很好,不错,支持!

  • 慕課君
    2015-12-30 16:46:49

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

    Maxmen...

    好像不行...

    2016-03-29 14:39:31

    共 1 条回复 >

  • jshacker007
    2015-11-17 17:52:30

    问题很好的

  • huliyichen
    2015-08-29 18:52:22

    JS主要是实现网页上的特效效果的,CSS样式是表现,HTML是网页内容的载体,在制作网页时,要把三者结合起来使用,由于浏览器显示机制的作用,空格是不起作用的,可以通过&nbsp;标签或CSS样式输出空格。

    CSS样式:document.write("<span style="whitespace">" + 要输出的内容 + “</span>”)内嵌式方式

    城南旧梦情

    不行,就算改了“</span>”的引号也不行

    2017-07-16 22:59:59

    共 1 条回复 >

  • luona
    2015-08-11 18:16:19

    厉害啊

  • 陈艳
    2015-06-18 15:52:12

    厉害!

  • 等你到头发花白
    2015-06-03 19:20:08

    &nbsp;

    慕盖茨801... 回复qq_北京一...

    “js”向html插入字符串“&nbsp;”,就相当于你在html里写下了“&nbsp;”,这样html就会把“&nbsp;”翻译成空格。

    2018-09-18 01:21:36

    共 2 条回复 >

  • UI设计师_子韬
    2015-05-10 00:32:03
  • UI设计师_子韬
    2015-05-10 00:31:06
     <a href="http://weibo.com/227193223>做一名有内涵的设计师</a>

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

  • UI设计师_子韬
    2015-05-10 00:29:11

    不错支持

  • 慕雪3193510
    2015-03-11 16:18:24

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

    慕課君 回复小于飞飞

    去百度js转义字符,这个这里没讲。

    2015-12-30 16:48:43

    共 6 条回复 >

JavaScript入门篇

JavaScript做为一名Web工程师的必备技术,本教程让您快速入门

739817 学习 · 9566 问题

查看课程

相似问题