我们在学习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. Sonar Java 规则插件开发 (基于阿里开发手册)

    引言 最近在做Sonar静态代码扫描管理,以此顺手接了Sonar的插件开发,基于阿里开发手册进行开发,在整体开发过程中,其中还是遇到不少坑位,也以此给大家做相应借鉴官网Demo演示插件开发地址:htt ...

  2. Csrf_token ||| CSRF跨站请求伪造

    # 注: 部分内容参考网上,侵删   CSRF(Cross-site request forgery) 跨站请求伪造,是一种对网站的恶意利用  它会通过伪装成受信任用户的请求来利用受信任的网站来获取一 ...

  3. css解决多行溢出显示省略号

    多行溢出 仅作为记录方便查找 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: number; /*n行溢 ...

  4. Some notes in Stanford CS106A（2）

    1.Local variable(local) ex. int i = 0; factorial(i); the "i" outside the method factorial( ...

  5. [C# 基础知识系列]专题五：当点击按钮时触发Click事件背后发生的事情 （转载）

    当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑问的—— ...

  6. Spring事务管理transactionManager

    bean.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...

  7. easyui Tree模拟级联勾选cascadeCheck，节点选择，父节点自动选中，节点取消，父节点自动取消选择，节点选择，所有子节点全部选择，节点取消，所有子节点全部取消勾选

    最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...

  8. iview中，table组件在缩进时产生的bug。

    问题描述: 在父元素因为缩进的关系撑开时,table组件不会因为父元素的撑开而自适应,问题如图 解决办法:在父一级的组件中使用table {width: 100% !important},强制使表格宽 ...

  9. 前端开发模拟数据------webpack-api-mocker

    应用场景: 在实际的项目开发过程中,一般都会进行前后端分离的开发模式,前端通过mock或者其他的插件模拟后台返回数据的功能.在常用的webpack构建工程项目中,通过和webpack-dev-serv ...

  10. Tomcat出现 java.net.ConnectException: Connection refused 异常的原因及解决方法

    原因有2. ------------------ 端口被占用 --------------------数据库链接失败导致的异常 cmd 查看 端口占用情况 检查数据库服务是否启动 --------此次 ...