HTML/CSS中的空格如何处理

╰半橙微兮° 2024-03-30 17:45 77阅读 0赞

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][https_www.weidianyuedu.com]

html中的空格的规则

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

<p> fly63 com </p>

显示效果为：

fly63 com

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

[html空格][html]保留

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

<pre> fly63 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"> weidianyuedu com</p>

显示效果为：

'weidianyuedu

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!

[Link 1]: https://m.weidianyuedu.com/
[https_www.weidianyuedu.com]: https://www.weidianyuedu.com/
[Link 2]: https://so.csdn.net/so/search?q=%E5%88%B6%E8%A1%A8%E7%AC%A6&spm=1001.2101.3001.7020
[html]: https://so.csdn.net/so/search?q=html%E7%A9%BA%E6%A0%BC&spm=1001.2101.3001.7020

发表评论取消回复

表情：

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

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

相关阅读

相关如何解决Java字符串处理中的空格问题

在Java中，处理字符串中的空格通常有以下几种方法： 1. 使用`trim()`方法： `String str = " Hello World ";` `str

待我称王封你为后i/ 2024年10月16日 11:03/ 0 赞/ 58 阅读

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

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

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

相关 excel空格处理

private String StringTrim(String str){ return str.replaceAll("[\\s\\u00

我就是我/ 2023年08月17日 17:27/ 0 赞/ 132 阅读

相关 js空格处理

[https://www.cnblogs.com/a-cat/p/8872498.html][https_www.cnblogs.com_a-cat_p_8872498.htm

Love The Way You Lie/ 2022年12月20日 09:05/ 0 赞/ 142 阅读

相关 HTML中如何键入空格？

HTML中如何键入空格当我们要在HTML中键入空格的话，直接按空格键是错误的书写行为，因为直接按空格键对于后期不太好，在HTML中写空格是用这个字符来写的，我们称是

偏执的太偏执、/ 2022年10月01日 12:50/ 0 赞/ 191 阅读

相关字符串中的空格处理

由于要鉴别用户输入的字符串根据局、段来进行分割。基本思路是找到局、段字符出现的位置，使用indexOf()方法可以满足该需求。找到位置后使用substring

我不是女神ヾ/ 2022年06月06日 01:42/ 0 赞/ 281 阅读

相关如何删除字符串中的空格

一、字符串第二弹：两头堵模式字符串问题中，模拟实现strcpy，和strstr 是两大重点，现在介绍第三大重点，两头堵模式，即在形如`" abcdefghijklmn

分手后的思念是犯贱/ 2022年06月01日 10:24/ 0 赞/ 315 阅读

相关处理json中的空格

很多json中带有空格 ![70][] 而json解析类很多自带去空行导致解析json如下 ![70 1][] 只能在解析之前用“111111”之类的替换之后再

逃离我推掉我的手/ 2022年05月28日 03:50/ 0 赞/ 381 阅读

相关 xml xslt中的空格输出处理

xml xslt中的空格输出处理,终于找到了一个可以用的解决方法了。方法一：用&\160;就可以表示空格了。方法二：用<xsl:text></xsl:text>可以保留

以你之姓@/ 2022年05月19日 01:16/ 0 赞/ 243 阅读

相关 CSS 的空格处理

一、空格规则 HTML 代码的空格通常会被浏览器忽略。 ![在这里插入图片描述][20200531224004767.png] ◡◡hello◡◡wo

我不是女神ヾ/ 2021年07月04日 15:01/ 0 赞/ 573 阅读