white-space（html中whitespace）
大家好，关于white-space很多朋友都还不太明白，不知道是什么意思，那么今天我就来为大家分享一下关于html中whitespace的相关知识，文章篇幅可能较长，还望大家耐心阅读，希望本篇文章对各位有所帮助！
1css white-space属性详解
css white-space这个css样式，用来设置element元素对内容中的空格的处理方式，有着几个可选值：normal,
nowrap,
pre,
pre-wrap,
pre-line
没有设置white-space属性，则默认为white-space:normal。normal表示合并空格，多个相邻空格合并成一个空格，在源码中的换行作为空格处理，只会根据容器的大小进行自动换行。
white-space:nowrap和normal一样，也合并空格，但是不会根据容器大小换行，表示不换行。
效果如下：这个效果在页面布局中使用很频繁，尤其在移动端布局中。
white-space:nowrap会导致文本不换行，经常和overflow,text-overflow一起使用，如下：
效果如下：
white-space:pre的作用是保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和
标签。
white-space:pre-wrap的作用是保留空格，并且除了碰到源码中的换行和
会换行外，还会自适应容器的边界进行换行。
效果如下：
white-space:pre-wrap和white-space:pre的区别就是会自适应容器的边界进行换行。
white-space兼容性
2white-space详解
【目录】
white-space 属性 设置处理元素内的空白，所谓空白有哪些？
Space(空格)、Enter(回车)、Tab(制表符)
我们熟知的是：
但是开发的要求各种各样，white-space的功能属性也很强大，可以有各种各样的不同效果，下面来看一张图：
这个古诗是怎么打出来的呢？
下面一个表格来说明一下出现这种情况的原因：
同样是320px的手机，iphone4可以在一行显示，但是安卓端就会有错位现象，这个开始让我很头疼：
ios端
andriod
这样的话使用媒体查询也无法处理，所以在这一行的父元素中设置，所有的元素强制一行显示。
文字超出去怎么办？
一般都自动换行了，想要文字溢出的部分自动用省略号表示，那么离不开三个属性:
可以看到下面的效果:
如果是显示诗歌，或者文案之类的，很多情况需要输入什么样子，出来什么样子。
这个时候用pre属性是最合适的(毕竟兼容性最好么):
version1.0 —— 2018/4/23，首次创建white-space详解
©burning_韵七七
3white-space属性详解
我们熟知的是：
1.在开发中，无论我们敲多少空格和回车，显示在页面上的都会合并成一个。
2.我们的文字在超过一行的情况下，就会自动换行。
但是开发的要求各种各样，white-space的功能属性也很强大，可以有各种各样的不同效果，下面来看一张图：
这个古诗是怎么打出来的呢？
床(空格)前(空格)(空格)(空格)(空格)明月光，疑是地上霜
（回车）
举头望明月，低头(Tab)思故乡
下面一个表格来说明一下出现这种情况的原因：
同样是320px的手机，iphone4可以在一行显示，但是安卓端就会有错位现象，这个开始让我很头疼，这样的话使用媒体查询也无法处理，所以在这一行的父元素中设置，所有的元素强制一行显示。
ul {
white-space:nowrap;/*强制内容在一行显示*/
overflow:hidden;/*超出部分隐藏*/
}
文字超出去怎么办？一般都自动换行了，想要文字溢出的部分自动用省略号表示，那么离不开三个属性:
white-space:nowrap; /*强制内容在一行显示*/
overflow:hidden; /*超出部分溢出*/
text-overflow:ellipsis; /*溢出的部分使用省略号*/
如果是显示诗歌，或者文案之类的，很多情况需要输入什么样子，出来什么样子。
这个时候用pre属性是最合适的(毕竟兼容性最好么):
white-space:pre;
4设置white-space可使文本保留换行格式
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有：
normal：默认，忽略文本中所有的空白、换行符；只有文本存在
或文本达到框的约束时，文本才会换行
nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行
pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在
或文本中有换行符时，文本才会换行
pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在
或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行
pre-line：会略文本中的空白符；文本存在
或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行
5“white-space: nowrap;”此代码是什么意思？
禁止文件自动换行。
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
好了，关于white-space和html中whitespace的分享到此就结束了，不知道大家通过这篇文章了解的如何了？如果你还想了解更多这方面的信息，没有问题，记得收藏关注本站。
