CSS的空间处理
一、空格规则
浏览器通常会忽略HTML代码中的空白。
上面是一行HTML代码,文本的前面、里面和后面各有两个空格。为了便于识别,这里使用半圆形符号来表示空间。
浏览器的输出如下。
你好世界
如您所见,文本前后的空格将被忽略,内部连续的空格将只被算作一个。这是浏览器处理空格的基本规则。
如果希望空格按原样输出,可以使用前置标签。
另一种方法是用HTML实体来代替表示空格。
二、空格字符
处理空格的HTML规则适用于各种字符。除了普通的空格键,它还包括制表符(t)和新行字符(r和n)。
浏览器会自动将这些符号转换成普通的空格键。
在上面的代码中,文本包含一个换行符,浏览器将其视为空格。输出结果如下。
你好世界
因此,文本内部的换行无效(除非文本放在前置标签内部)。
菲尔普斯世界/p
上面的代码使用br标记来明确指示换行符。
三、CSS 的 white-space 属性
HTML语言的空间处理基本是直接过滤。这样的处理过于粗糙,完全忽略原文内部的空格可能是有意义的。
CSS提供了一个空白属性,可以提供更精确的方式来处理空格。这个属性有六个值,除了一个universal inherit(继承父元素),其余五个值在下面依次介绍。
空白属性的默认值是正常的,这意味着浏览器以正常方式处理空格。
在上面的代码中,文本前面有两个空格,里面有一个长单词和一个新的行字符。
然后,容器p指定一个相对较小的宽度。为了便于识别,背景颜色设置为红色。
p { width: 100pxbackground:红色;}
显示效果如下。
可以看到文本开头的空格被忽略了。因为容器太窄,第一个单词溢出容器,然后在下一个空间换行。文本中的换行符会自动转换为空格。
当空白属性为nowrap时,不会出现换行符,因为超出了容器宽度。
显示效果如下。
所有文本显示为一行,不换行。
当空白属性是pre时,它将被视为pre标记。
显示效果如下。
以上结果与原文完全一致,保留所有空格和换行符。
当空格属性被预包装时,它基本上是根据预标记来处理的。唯一不同的是,当超过容器宽度时,会出现一条新的线。
p { white-space:预包装;}
显示效果如下。
文本开头的空格,里面的空格,换行符都保留,容器外换行。
当空白属性为行前时,表示保留换行符。除了换行符将按原样输出之外,其他都符合空白:正常规则。
显示效果如下。
除了文本内部的换行符没有转换成空格,其他都符合正常的处理规则。这对诗化文本很有用。
四、参考链接
HTML中空白什么时候重要?作者:帕特里克布罗塞特
《白色空间》,作者莎拉科普
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/192913.html原文链接:https://javaforall.cn