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 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
详解webpack多页面配置记录
Jan 22 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
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清除bom示例
2014/03/03 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python实现解数独程序代码
2017/04/12 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
python如何读写json数据
2018/03/21 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
Django配置文件代码说明
2019/12/04 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
什么是Python中的顺序表
2020/06/02 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Django REST 异常处理详解
2020/07/15 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
送货司机岗位职责
2013/12/11 职场文书
《乡愁》教学反思
2014/02/18 职场文书
聚美优品励志广告词
2014/03/14 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
理解python中装饰器的作用
2021/07/21 Python