“white-space: nowrap;”此代码是啥意思？

Posted 2023-03-20

禁止文件自动换行。

white-space，英语词组意思为空余时间，在计算机术语中的意思是泛空格符。white-space 属性设置如何处理元素内的空白。

nowrap :强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

设置或检索对象内空格字符的处理方式。

空格字符，像换行，空格，TAB，在html文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体 来添加空格，用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响是一样的。

此属性作用于块对象。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 whiteSpace 。

示例：

normal：轻轻地我走了正如我轻轻地来。

pre：轻轻地我走了（这里接很多测试文字）正如我轻轻地来。

pre - wrap：轻轻地我走了（这里接很多测试文字）正如我轻轻地来pre - line轻轻地我走了（这里接很多测试文字）正如我轻轻地来。

nowrap：轻轻地我走了正如我轻轻地来。

扩展资料：

在使用white-space: nowrap强制文本不换行后，发现之前自动换行的问题解决了，但同时空格也合并了。

因为是代码块，可能有很多行，而每行的前面都需要用空格表示代码的层次关系，所以不希望空格被合并。

所以强制文本不换行的前提下保留原有的空格不合并

设置或检索对象内空格字符的处理方式。

空格字符，像换行，空格，TAB，在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时，你可以使用不换行空格的命名实体   来添加空格，用 br 元素来添加换行。

此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。

此属性作用于块对象。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 whiteSpace 。

参考资料来源：百度百科-white-space

参考技术A 禁止文字自动换行 参考技术B 定义和用法
white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值： normal
继承性： yes
版本： CSS1
javascript 语法： object.style.whiteSpace="pre"

实例
规定段落中的文本不进行换行：
p

white-space: nowrap

TIY

浏览器支持
所有浏览器都支持 white-space 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

可能的值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

参考资料：http://www.w3school.com.cn/css/pr_text_white-space.asp

本回答被提问者采纳