放假的电话

white-space属性总结

这是关于white-spece属性的一个小总结。不得不承认,写这个,实在是自己基础不好。

根据MDN上的例子,对于这样的一段html代码:

1
2
3
4
5
6
7
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

通过设置p元素的white-space,可以达到不同的显示效果。

不保留空白

normal

这是white-space的默认设置,相当于移除了所有的空白跟newline符,变成了一大段文字。text会根据p的大小自动换行。

nowrap

跟normal类似,移除了空白跟newline,而且text不会自动换行。根据p的overflow属性,过长的文字可能会隐藏,或者显示一个scroll bar。

保留空白

保留空白的属性都以pre开头。

pre

保留空白跟newline,但是文字不会自动换行。

pre-wrap

保留空白跟newline,文字自动换行。

pre-line

保留newline,但是移除空白,文字自动换行。我个人觉得这个显示效果是最好的,但是以前一直不知道这个属性。

Summary

更多关于white-space的信息,可以查看MDN,上面还有个非常生动的可交互的例子。