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 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
php实现的简单日志写入函数
2015/03/31 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
2012/12/19 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
node.js基础知识小结
2018/02/26 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
京东优选小程序的实现代码示例
2020/02/25 Javascript
python实现学生管理系统
2018/01/11 Python
Python内建模块struct实例详解
2018/02/02 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
部队领导证婚词
2014/01/12 职场文书
安全生产活动月方案
2014/03/09 职场文书
单位接收函格式
2015/01/30 职场文书
长城的导游词
2015/01/30 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL