JS输出空格的简单实现方法


Posted in Javascript onSeptember 08, 2016

在写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; ”样式属性。这个样式表示"空白会被浏览器保留"

以上这篇JS输出空格的简单实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
Js sort排序使用方法
Oct 17 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 #Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 #Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 #Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 #Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 #Javascript
JS实现页面载入时随机显示图片效果
Sep 07 #Javascript
JS简单实现浮动窗口效果示例
Sep 07 #Javascript
You might like
php intval的测试代码发现问题
2008/07/27 PHP
php 购物车实例(申精)
2009/05/11 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
浅谈js闭包理解
2019/04/01 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
EJB的角色和三个对象
2015/12/31 面试题
小区门卫岗位职责
2013/12/31 职场文书
市三好学生主要事迹
2014/01/28 职场文书
小学新学期寄语
2014/04/02 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android