JS中如何输出空格

  1. 在写JS代码的时候,大家可以会发现这样现象:
    document.write("   1      2                3  ");
    结果: 1 2 3

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

   这是因为浏览器显示机制,对手动敲入的空格,将连续多个空格显示成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;”样式属性。这个样式表示"空白会被浏览器保留"

[HTML]在页面中输出空格的几种方式的更多相关文章

  1. Js 在页面中输入消息的几种方式

    一.方式 alert(“”); confirm(“”) ; prompt(“”);         接收用户信息 console.log(“”);      在网页控制台中输出消息 document. ...

  2. Asp.net MVC在Razor中输出Html的两种方式

    http://qubernet.blog.163.com/blog/static/177947284201485104616368/ Razor中所有的Html都会自动编码,这样就不需要我们手动去编码 ...

  3. 在Razor中输出Html的两种方式

    Razor中所有的Html都会自动编码,这样就不需要我们手动去编码了(安全),但在需要输出Html时就是已经转义过的Html文本了,如下所示: @{ string thisTest = "& ...

  4. java web中日期Date类型在页面中格式化显示的三种方式

    一般我们经常需要在将服务器端的Date类型,传到页面进行显示,这就涉及到一个如何格式化显示Date类型的问题,一般我们有三种方式进行: 1)在服务端使用SimpleDateFormat等类格式化成字符 ...

  5. 在JSP页面中输出JSON格式数据

    JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库. JSON-taglib主页: http://json-taglib.sourceforge.net/index.html J ...

  6. javascript小实例,在页面中输出当前客户端时间

    时间对象(Date())比较简单,本文旨在为初学者入门使用,大牛可略过! 本文承接基础知识实例,说一下实例的要求: 在页面中输出当前客户端时间(2015年1月1日星期一10:10:10这样的格式),每 ...

  7. 基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  8. ASP中页面之间传递值的几种方式

    ASP.NET页面之间传递值的几种方式 页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryS ...

  9. JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

随机推荐

  1. JS常见的几种数组去重方法

    总结一下JS中用到的数组去重的方法  方法一: 该方法利用对象的属性值不能相同: function arrDelLikeElement (array) { const result = []; con ...

  2. 第三次scrum作业!

    1.小组成员 舒 溢 许嘉荣 唐 浩 黄欣欣 廖帅元 刘洋江 薛思汝 2.个人在小组第三次冲刺任务及其完成情况描述 根据小组讨论所分配任务,积极辅助组长以及各个成员,理清思路,编写代码,尽量在规定时间 ...

  3. java模拟post提交

    package javapost; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOE ...

  4. 【Leetcode】【Medium】Binary Tree Preorder Traversal

    Given a binary tree, return the preorder traversal of its nodes' values. For example:Given binary tr ...

  5. Python学习---重点模块之shelve

    简单示例 import shelve f = shelve.open(r'shelve.txt') f['info'] = {'name':'ftl', 'age':23, 'sex': 'male' ...

  6. laravel 使用EasyWechat 3分钟完成微信支付(以APP支付为例)

    上一篇写了支付宝支付,然后这段时间我又把微信支付给接上了,作为萌新的我还是很有成就感的,哈哈~~好了,该写正事了. 第一步:创建应用及配配置  首先到微信的官方平台注册应用https://pay.we ...

  7. ZT 类与类之间的四种关系

    csdn上一个好贴子:http://bbs.csdn.net/topics/390646332 类与类之间的四种关系1.依赖(Dependency)   类A在类B中作为一个成员函数的参数或者是返回值 ...

  8. TypeScript----类

    一.类的属性 public: 公有, private: 私有,不能在声明它的类的外部访问,只能在类内部访问 protect: 保护,不能在声明它的类的外部访问,但继承者除外 readonly 只读属性 ...

  9. 从windows到linux的换行转换工具dos2unix

    同学们也许知道,windows中的文本文件的换行符是"\r\n",而linux中是"\n".由于换行符的不同,所以有的时候会发生一些莫名其妙的状况.至于具体什么 ...

  10. 2017 计蒜之道 初赛 第一场 A、B题

    A题 阿里的新游戏 题目概述: 阿里九游开放平台近日上架了一款新的益智类游戏——成三棋.成三棋是我国非常古老的一个双人棋类游戏,其棋盘如下图所示: 成三棋的棋盘上有很多条线段,只能在线段交叉点上放入棋 ...