为什么HTML中的多个空格或是回车在浏览器上只能显示出一个?
我们在学习HTML的时候可能书本或是老师会告诉我们一件事,就是在HTML中不管我们在两个文本之间加上多少连续的空格或是回车,到了浏览器里面只能显示出一个来。但是我们从来不知道为什么。
原因很简单,因为在HTML中,空格和回车表示的是一个文本分隔符。什么意思?就是说你加的空格或回车在浏览器看来只不过相当于你把“hello world”中间的这个用来表示这是两个单词的空格拉长了而已,所以到了浏览器上,它会按照标准去显示一个空格符,而不是我们给了多少它就会显示多少。
下面有个有趣的例子就是这个原理:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: #f00;">woshiyigehenchangdeyingwendanci</div>
<div style="width: 100px;height: 100px;background-color: #0f0;">wo shi yi ge hen chang de ying wen dan ci</div>
<div style="width: 100px;height: 100px;background-color: #00f;">我是中文文本,我的每个字都相当于一个单词</div>
</body>
</html>
为什么HTML中的多个空格或是回车在浏览器上只能显示出一个?的更多相关文章
- MFC 编辑框中字体大小改变,行高不能改变,只能显示一半的问题,已解决。
CKagulaCEdit是CEdit的一个继承类,m_edit的CKagulaCEdit类型的一个变量 调用的时候,是这样的: 编辑框中字体大小改变,行高不能改变,只能显示一半的问题,问题如下: 这时 ...
- mssql sqlserver 使用sql脚本剔除数据中的tab、空格、回车等特殊字符的方法分享
摘要: 在sqlserver开发中,常常有同事反馈无法剔除空格,我们可以通过仔细检查发现,并不是空格字符,而是tab键,如下所示: 解决方法: 对于这些特殊字符的替换,我们需采用字符所对应的ascii ...
- js中去掉字符串的空格、回车换行
//例如下面这个json串,中间的\n表示换行 var str = "{' retmsg':'success ',\n' trans_date':' 20170906'}"; co ...
- body中设置-webkit-scrollbar竖向滚动条,在手机浏览器上无效
暂时无解,如果是chrome的PC模式,滚动条是没有的,但如果是手机模式,滚动条会出现,且无法设置其样式,滚完后会自动消失. 如果设置div这些块元素,完全没问题.
- Html中代码换行造成空格间距的问题
Html中代码换行造成空格间距的问题解析 解决方法: 一.简单粗爆不换行 写代码的时候不要换行,input等在一行输写,那么将解决该问题.但是代码就变得不再那么容易好看. 二.设置父级块的字体大小为0 ...
- 换行符javajava去除字符串中的空格、回车、换行符、制表符
在改章节中,我们主要介绍换行符java的内容,自我感觉有个不错的建议和大家分享下 每日一道理 只有启程,才会到达理想和目的地,只有拼搏,才会获得辉煌的成功,只有播种,才会有收获.只有追求,才会 ...
- 对C标准中空白字符(空格、回车符(\r)、换行符(\n)、水平制表符(\t)、垂直制表符(\v)、换页符(\f))的理解
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] C标准库里<ctype.h>中声明了一个函数: int isspace(int c); 该函数判断字符c是否 ...
- 空格 在不同浏览器中显示距离不一致问题解决方法
在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同. 网上资料说不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,而firefox和chrome的默 ...
- 关于一些url中传递参数有空格问题
1.关于一些url中传递参数有空格问题: url.replace(/ /g, "%20") 从上面的例子中可以看到可以用:replace(/ /g, "%20" ...
随机推荐
- C# 记录日志
public static void WriteLogs(string fileName, string type, string content) { string path = AppDomain ...
- 游戏 & Github Page
1. snakewizard.github.io 贪吃蛇小游戏 2. mattbasile.github.io 龙珠 DragonballZ-Battle 3. nathandhyou.github. ...
- Spark SQL / Catalyst 内部原理 与 RBO
原创文章,转载请务必将下面这段话置于文章开头处. 本文转发自技术世界,原文链接 http://www.jasongj.com/spark/rbo/ 本文所述内容均基于 2018年9月10日 Spark ...
- 新式类单例模式之 __new__()
单例模式: 确保一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 类中有一个静态属性__instance,默认为none,重构__new__()方法,判断__instance是否为空,若为 ...
- 在typeScript+vue项目中使用ref
因为vue项目是无法直接操作dom的,但是有时候开发需求迫使我们去操作dom. 两个办法,一个是很low的再引入jq,然后通过jq来操作,但是这样就失去了我们使用vue的意义, 可惜的是我曾经这样干过 ...
- 关于layui中tablle 渲染数据后 sort排序问题
最近在使用easyweb框架做后台管理,案例可见https://gitee.com/whvse/EasyWeb. 其中遇到了 sort排序问题, html代码:<table class=&quo ...
- for循环比较
在实际的开发过程中,一般都会用到for循环,都可以用来遍历,但是这几个之间又存在细微的差别! 一,传统的for循环: var arr = ['good', 'good', 'study']; for ...
- bee: command not found问题解决之道
$ bee bash: bee: command not found 遇到这个错误的时候,我希望您是所有环境全部安装好的情况下遇到的,如果你的环境没有安装好请参考 beego环境搭建http://bl ...
- Django 数据迁移
在1.6之前, Django只支持添加新的model到数据库, 而无法编辑或修改已经存在的model. 在当时, 这些Django缺失的功能可以通过South实现. 1. 新的命令 Django 1. ...
- 多线程与CPU和多线程与GIL
多线程与CPU:1.单核CPU CPU密集型的程序(做计算操作的程序) 单线程即可( 此时的任务已经把CPU资源100%消耗了,就没必要也不可能使用多线程来提高计算效率)2.单核CPU IO密集 ...