CSS空间处理
发布时间 :2021-03-16 20:36:02 浏览: 194次 来源:网络整理 作者:佚名
CSS空间处理

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

◡◡hello◡◡world◡◡

上面是一行HTML代码,在文本的前面,里面和后面都有两个空格。为了便于识别,半圆符号◡表示空格。

浏览器的输出如下。

hello world

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

如果您希望按原样输出空白,则可以使用

标签。

◡◡hello◡◡world◡◡

另一种方法是使用HTML实体代替空格。

helloworld

空格字符

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

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

helloworld

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

hello world

因此,文字内部的换行无效(除非放置了文字

标签内)。

hello
world

使用以上代码

The

标记明确表示换行。

CSS空格属性

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

CSS提供了一个空白属性,该属性可以提供一种更精确的空白处理方式。该属性共有六个值,除了通用的继承(继承父元素)外,其余五个值依次引入。

空白:正常

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

◡◡hellohellohello◡helloworld

在上面的代码中亚博APp买球首选 ,文本的前面有两个空格,一个长字和一个换行符。

然后是容器

指定较小的宽度。为了便于识别,将背景色设置为红色。

p {width: 100px;background: red;}

显示效果如下图所示。

如您所见,文本开头的空格将被忽略。因为容器太窄,所以第一个单词使容器溢出,然后在其后的空格处换行。文本内的换行符会自动转换为空格。

空白:nowrap

当空白属性为nowrap时hg8868体育投注hg8868体育投注 ,由于超出了容器的宽度,所以不会出现换行符。

p {white-space: nowrap;}

显示效果如下图所示。

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

空白:前置

当空白属性为pre时,请遵循

标签的方式处理。

p {white-space: pre;}

显示效果如下图所示。

以上结果与原始文本完全相同,所有空格和换行符均保留。

空白:预包装

当空白属性是预包装时,基本上遵循它

标签的方式处理,唯一区别是超出容器宽度时,会发生换行。

p {white-space: pre-wrap;}

显示效果如下图所示。

文本开头的空格,内部空格和换行符都将保留,并且换行符发生在容器之外。

空白:行前

当空白属性为换行符时,表示保留换行符。除了换行符将按原样输出外,其他所有内容都与空格一致:正常规则。

p {white-space: pre-line;}

显示效果如下图所示。

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

参考链接

此页面上的内容是由Tower Light Network Technology Co.,Ltd通过Internet收集和编辑的。所有信息仅供用户参考。该网站不拥有所有权。如果您认为此页面上的内容涉嫌抄袭,请及时与我们联系。并提供相关证据div空格代码,工作人员将在5个工作日内与您联系,一旦核实div空格代码,本网站立即删除侵权内容。链接到本文:

上一篇 一触即发,宠物O2O服务从王兴仁的上门沐浴开始
深圳公司:
至尊国际下载-手机端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号