空格代码(不可见的空格符号)
发布时间 :2021-03-17 13:46:48 浏览: 100次 来源:网络整理 作者:佚名
空格代码(不可见的空格符号)

CSS的空间处理

一、空间规则

浏览器通常会忽略HTML代码中的空格。

上面是一行HTML代码,在文本之前,内部和之后都有两个空格。为了便于识别亚博视讯 ,此处使用半圆形符号表示空间。

浏览器的输出如下。

你好世界

如您所见,文本之前和之后的空格将被忽略,并且内部的连续空格将仅计为一个。这是浏览器处理空间的基本规则。

如果您希望按原样输出空白,则可以使用前导标签。

另一种方法是使用HTML实体而不是表示空格。

二、空格字符

用于处理空格的HTML规则适用于所有类型的字符。除了普通的空格键,它还包含制表符(t)和换行符(r和n)。

浏览器将自动将这些符号转换为普通的空格键。

在上面的代码中,文本包含换行符,浏览器将其视为空格。输出结果如下。

你好世界

因此,文本内的换行符无效(除非文本置于前面的标记内)。

菲尔普斯世界/ p

上面的代码使用br标签清楚地指示换行符。

三、 CSS空格属性

HTML语言的空间处理基本上是直接过滤。这种处理太粗糙了,完全忽略原始文本中的空格可能是有道理的。

CSS提供了一个空白属性,该属性可以提供一种更精确的方式来处理空白。该属性具有六个值,除了通用继承(继承父元素)外亚博账号登录 ,下面依次介绍其他五个值。

blank属性的默认值为normal,这表示浏览器以正常方式处理空格。

在上面的代码中,文本前面有两个空格,其中包含一个长字和一个换行符。

然后,容器p指定相对较小的宽度。为了便于识别div空格代码,将背景色设置为红色。

p {width:100pxbackground:red;}

显示效果如下。

您可以看到文本开头的空格被忽略了。因为容器太窄,所以第一个单词使容器溢出,然后包装在下一个空间中。文本中的换行符会自动转换为空格。

当blank属性为nowrap时div空格代码,不会出现换行符,因为它超出了容器的宽度。

显示效果如下。

所有文本显示为一行,没有换行符。

当blank属性为pre时,它将被视为pre标签。

显示效果如下。

以上结果与原始文本完全相同亚博网站有保障的 ,保留了所有空格和换行符。

当预包装了space属性时,基本上会根据预标签对其进行处理。唯一的区别是,当超出容器的宽度时,将出现新的一行。

p {空白:预包装;}

显示效果如下。

文本开头的空格,内部的空格和换行符被保留,而换行符在容器外部。

当blank属性位于该行之前时,表示保留换行符。除了换行符将按原样输出外,其他所有内容都符合空白:正常规则。

显示效果如下。

除了文本中的换行符不会转换为空格外,其他所有内容均符合常规处理规则。这对于诗歌文本很有用。

四、参考链接

空格在HTML中什么时候重要?作者:帕特里克·布·罗塞特

“空白”,作者莎拉·科普

成都大学(四川省成都市幼儿园幼儿园,成都卫生学校,成都工业大学医学院医学分院)

上一篇 CSS空间处理
深圳公司:
至尊国际下载-手机端APP下载
Shenzhen Moan Enterprise Image Design Co., Ltd.
深圳市福田区红荔西路第壹世界广场B座15A
15A,Building B,First World Plaza,No,7002,West Hongli Rd,Shenzhen
400-833-0755
135 9035 8806
0755-8392 3996
香港公司:
香港摩恩企业形象设计有限公司
Hong Kong Moan Enterprise Image Design Co., Ltd.
香港尖沙咀海港城海运大厦叁楼302室
Room 302, 3 / F, Maritime Building, Harbour City, Tsim Sha Tsui, Hongkong.
00852-6778 6216
Copyright © 2008-2019 | All Rights Reserved   |  至尊国际下载-手机端APP下载  粤ICP备06061602号