我们在学习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中的多个空格或是回车在浏览器上只能显示出一个？的更多相关文章

  1. MFC 编辑框中字体大小改变，行高不能改变，只能显示一半的问题，已解决。

    CKagulaCEdit是CEdit的一个继承类,m_edit的CKagulaCEdit类型的一个变量 调用的时候,是这样的: 编辑框中字体大小改变,行高不能改变,只能显示一半的问题,问题如下: 这时 ...

  2. mssql sqlserver 使用sql脚本剔除数据中的tab、空格、回车等特殊字符的方法分享

    摘要: 在sqlserver开发中,常常有同事反馈无法剔除空格,我们可以通过仔细检查发现,并不是空格字符,而是tab键,如下所示: 解决方法: 对于这些特殊字符的替换,我们需采用字符所对应的ascii ...

  3. js中去掉字符串的空格、回车换行

    //例如下面这个json串,中间的\n表示换行 var str = "{' retmsg':'success ',\n' trans_date':' 20170906'}"; co ...

  4. body中设置-webkit-scrollbar竖向滚动条，在手机浏览器上无效

    暂时无解,如果是chrome的PC模式,滚动条是没有的,但如果是手机模式,滚动条会出现,且无法设置其样式,滚完后会自动消失. 如果设置div这些块元素,完全没问题.

  5. Html中代码换行造成空格间距的问题

    Html中代码换行造成空格间距的问题解析 解决方法: 一.简单粗爆不换行 写代码的时候不要换行,input等在一行输写,那么将解决该问题.但是代码就变得不再那么容易好看. 二.设置父级块的字体大小为0 ...

  6. 换行符javajava去除字符串中的空格、回车、换行符、制表符

    在改章节中,我们主要介绍换行符java的内容,自我感觉有个不错的建议和大家分享下     每日一道理 只有启程,才会到达理想和目的地,只有拼搏,才会获得辉煌的成功,只有播种,才会有收获.只有追求,才会 ...

  7. 对C标准中空白字符（空格、回车符(\r)、换行符(\n)、水平制表符(\t)、垂直制表符(\v)、换页符(\f)）的理解

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   C标准库里<ctype.h>中声明了一个函数: int isspace(int c); 该函数判断字符c是否 ...

  8. 空格&nbsp在不同浏览器中显示距离不一致问题解决方法

      在ie.firefox.chrome浏览器上显示的效果不太一样,主要是前面的空格宽度不同. 网上资料说不同的浏览器会有不同的默认字体,一般 IE默认字体都是宋体,而firefox和chrome的默 ...

  9. 关于一些url中传递参数有空格问题

    1.关于一些url中传递参数有空格问题: url.replace(/ /g, "%20") 从上面的例子中可以看到可以用:replace(/ /g, "%20" ...

随机推荐

  1. WeX5学习笔记-02

    1.安装wex5,下载地址 http://wex5.com WeX5是绿色免安装的,解压即可直接使用.注意:不能解压到含中文.空格和特殊字符 的目录下, 例如:Program Files,是不可以的, ...

  2. Android日常问题整理

    1.系统语言切换后Activity布局刷新问题 4.2增加了一个layoutDirection属性,当改变语言设置后,该属性也会成newConfig中的一个mask位.所以ActivityManage ...

  3. [Leetcode]27. 移除元素

    题目描述: ++难度:简单++ 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 ...

  4. web端分享网页到各个网站JS代码（微信为生成二维码）

    /*分享到新浪微博,QQ空间,人人网,生成二维码*/ var myTitle=$("title").text(); var myHref = window.location.hre ...

  5. 201771010141 周强《面向对象设计 java》第十五周实验总结

    理论部分 ◼ JAR文件◼ 应用程序首选项存储◼ Java Web Start JAR文件: 1.Java程序的打包:程序编译完成后,程序员将.class文件压缩打包为.jar文件后,GUI界面程序就 ...

  6. L2-014 列车调度 （25 分)

    L2-014 列车调度 (25 分)   火车站的列车调度铁轨的结构如下图所示. 两端分别是一条入口(Entrance)轨道和一条出口(Exit)轨道,它们之间有N条平行的轨道.每趟列车从入口可以选择 ...

  7. Python爬虫--简单的单词查询

    Refer to: https://github.com/gaopu/Python/blob/master/Dict.py 本程序参考自上面Github连接 该程序功能是输入一个单词可以给出这个单词的 ...

  8. python学习笔记-os模块参数

    python的os 模块提供了非常丰富的方法用来处理文件和目录.常用的方法如下表所示: os.access(path, mode) 检验权限模式 os.chdir(path) 改变当前工作目录 os. ...

  9. 剑指offer前6题

    二维数组中的查找 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 时间限制:1秒 ...

  10. html5 知识点简单总结02

    三个列表: 1.无序列表 默认样式  实心小圆点 ul type属性 "square" 实心方形 type属性  "circle" 空心圆 type属性  &q ...