关于html中的空格的规则

小咪咪 2024-03-26 19:15 47阅读 0赞

![5e1a7c3f7250db5f9659f2f146dc76ca.jpeg][]

**html中的空格的规则**

在html中内容中的多个空格一般会被视为一个，连续的多个空格符被自动合并了。同时内容前后的空格也会被清除， 如下：

<p> [weidianyuedu.com][] </p>

显示效果为：

[weidianyuedu.com][]

备注：浏览器的这种机制处理，同样适用于除了普通的空格键，还包括[制表符][Link 1]（\\t）和换行符（\\r和\\n），可以通过使用<br>标签显式表示换行。

**html空格保留**

这时候如果希望html中多个连续的空格在网页上能显示，在浏览器中表现出真实的自身空格缩进和换行效果。 我们知道一般有2种方式，使用<pre>标签，或者使用 来代表空格。如下：

<pre> [weidianyuedu.com][] </pre>

或者

<p> fly63 com </p>html中空格目前有这些：

不断行的空白（1个字符宽度）

半个空白（1个字符宽度）

一个空白（2个字符宽度）

窄空白（小于1个字符宽度）

**css空格保留**

1、css中当 white-space 属性取值为pre时，就按照<pre>标签的方式处理。浏览器会保留文本中的空格和换行,例如：

<p style="white-space:pre"> [weidianyuedu.com][]<p>

显示效果为：' [weidianyuedu.com][] '

2、css的white-space属性为pre-line时，意为保留换行符。除了换行符会原样输出，其他都与white-space:normal规则一致。

<p style="white-space: pre-line"> fly63 com</p>

显示效果为：

'fly63

com'

3、css的 letter-spacing 属性用于设置文本中字符之间的间隔，例如：

<p style="letter-spacing:5px;">欢迎光临！</p>

显示效果为：' 欢 迎 光 临 ！'

4、css的 word-spacing 属性用于设置文本中单词之间的间隔，例如：

<p style="word-spacing:5px">Happy new year!</p>

显示效果为： Happy new year!

来源：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[5e1a7c3f7250db5f9659f2f146dc76ca.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/de260119a727429291362feb16c01d69.png
[weidianyuedu.com]: https://weidianyuedu.com
[Link 1]: https://so.csdn.net/so/search?q=%E5%88%B6%E8%A1%A8%E7%AC%A6&spm=1001.2101.3001.7020
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com

发表评论取消回复

表情：

评论列表（有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML/CSS中的空格如何处理

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][https_www.weidianyuedu.com] html中的空格的规

╰半橙微兮°/ 2024年03月30日 17:45/ 0 赞/ 65 阅读

相关关于html中的空格的规则

![5e1a7c3f7250db5f9659f2f146dc76ca.jpeg][] html中的空格的规则在html中内容中的多个空格一般会被视为一个，连续的多个空格符

小咪咪/ 2024年03月26日 19:15/ 0 赞/ 48 阅读

相关 HTML插入空格 HTML多个空格 HTML实体

解决HTML多个空格会被解析为一个空格的问题读者可能不知道HTML里面有个概念叫做 HTML实体这里就对其进行粗略地讲解一下 HTML实体在 HTML 中，

淩亂°似流年/ 2023年05月21日 05:57/ 0 赞/ 11 阅读

相关 HTML中；&emsp；等空格的区别

HTML中` `等空格的区别 HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（` `）是常规空格的宽度，可运行于所有主流浏览器。其他

骑猪看日落/ 2022年09月04日 07:56/ 0 赞/ 69 阅读

相关 MySQL中关于查询条件中的字符串空格问题

假设当前[mysql][]数据库中有个表：sysuser 有个字段是：sysUseName 字段中有条记录的内容是：robin 请看下面这两个SQL语句： SELECT

短命女/ 2022年08月13日 18:43/ 0 赞/ 254 阅读

相关 HTML中的常用的空格总结

HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（ ‌‍）在不同浏

阳光穿透心脏的1/2处/ 2022年06月13日 12:53/ 0 赞/ 199 阅读

相关 HTML的5种空格实体

HTML提供了5种空格实体它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（ &ensp; &emsp;  

小灰灰/ 2022年05月22日 11:09/ 0 赞/ 170 阅读

相关 html中css样式的优先级规则

CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高

╰半夏微凉°/ 2022年04月14日 04:05/ 0 赞/ 663 阅读

相关 html空格代码是什么？html中空格怎么打

html空格代码是什么？html中空格怎么打？对于刚刚入门的新手来说可能比较陌生，下面我们来总结一下html空格代码。

你的名字/ 2021年01月30日 17:34/ 0 赞/ 722 阅读

相关 html中的空格代码是什么

一个字符的半角的不断行的空格，如果需要在网页中插入多个空格，可以

小灰灰/ 2020年05月14日 10:05/ 0 赞/ 932 阅读