[css]whitespace?white-space?

HTML中的whitespace是什么?

whitespace在英文中意思是空白。在HTML中顾名思义,应该指譬如tab、backspace、制表符、换行符等空白。

white-space各种属性值都是什么意思?

white-space属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。
我觉得w3school给的解释并不容易记忆而且有些细节不严谨,所以自己稍作加工。

属性值 意义
normal 相邻空白符合并成一个,且如果超过外层框会自动换行。默认属性。表示所有相邻的空白符都会被坍缩(collapse)成一个空格。
nowrap 不会换行直至遇到
,且相邻空白符合并。MDN:"but suppresses line breaks (text wrapping) within text." wrap是包裹的意思,我的理解是一层包裹算一行。于是没有包裹自然不会换行
pre 空白会被浏览器保留。其行为方式类似于 HTML 中的 <pre>标签。注意<pre>标签是块元素
pre-wrap 空白符会被浏览器保留。和pre非常像,区别在于pre-wrap会根据外层line-box进行自动换行,而pre则会溢出外层框
pre-line 相邻空白符会被合并成一个,但是换行符会保留。

存疑

  1. MDN中关于white-space的解释,我不明白line-box是什么意思Breaks lines as necessary to fill line boxes.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容