为什么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" ...
随机推荐
- python基础一之课后作业:编写登录接口
1 # Author : Mamba 2 3 #python基础一之课后作业:编写登录接口 4 5 # 输入用户名密码 6 # 认证成功后显示欢迎信息 7 # 用户名3次输入错误后,退出程序 8 # ...
- [C# 基础知识系列]专题三:如何用委托包装多个方法——委托链 (转载)
引言: 上一专题介绍了下编译器是如何来翻译委托的,从中间语言的角度去看委托,希望可以帮助大家进一步的理解委托,然而之前的介绍都是委托只是封装一个方法,那委托能不能封装多个方法呢?因为生活中经常会听到, ...
- 牛客网PAT乙级(Basic Level)真题-数字分类 (20)
题目描述 给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字: A1 = 能被5整除的数字中所有偶数的和: A2 = 将被5除后余1的数字按给出顺序进行交错求和,即计算n1-n2+n3-n4 ...
- MySQL之命令提示符
一.MySQL创建数据表 1.通过 mysql 命令窗口创建MySQL数据库 2.通过 mysql 命令窗口创建MySQL数据表 3.通过 mysql 命令窗口查看创建的数据表的具体信息 二.Mysq ...
- JAVA005-基本数据类型变量的存储
1.变量按类型分: 数据类型分为基本数据类型和引用数据类型 引用数据类型包括数组和类等 类定义的变量又叫对象 2.按照作用范围分为: 类级别.对象实例级.方法级.块级 方法级:局部变量 3.字符型的字 ...
- Centos7.5系统 SSH升级到7.9
SSH7.9安装 #!/bin/bash#删除旧版ssh包 危险操作,不删除也可以安装,建议跳过此操作.#rpm -e `rpm -qa | grep openssh` #安装zlib依赖包wget ...
- linux学习笔记2 - linux常用命令
转载请标注原链接:http://www.cnblogs.com/xczyd/p/5543731.html 第一篇博客:linux学习笔记1-ubuntu的安装与基本设置 之中,已经介绍了如何安装lin ...
- Buy or Build(UVa1151)
如果枚举每个套餐,并每次都求最小生成树,总时间复杂度会很高,因而需要先求一次原图的最小生成树,则枚举套餐之后需要考虑的边大大减少了. 具体见代码: #include<cstdio> #in ...
- Javascript 4.3 事件处理函数
鼠标指针悬停在某个元素上时触发一个动作:onmouseover事件处理函数 鼠标指针离开某个元素时触发一个动作:onmouseout事件处理函数 点击某个链接时触发一个动作:onclick事件处理函数 ...
- 一次奇妙的http请求之旅
TCP/IP不是一个协议,而是一个协议族的统称.里面包括IP协议.IMCP协议.TCP协议. 这里有几个需要注意的知识点: 互联网地址:也就是IP地址,一般为网络号+子网号+主机号 域名系统:通俗的来 ...