前言：
最近debug的时候经常遇到一些花接近一个小时才解决的问题，不禁想到曾经有个问题困扰自己很久的问题： 我的一个块级元素内的行内元素中的字为何总不会自动换行，结果微软大神一看哭笑不得,说因为我为了方便测试，直接乱按键盘敲了一行没有空格的字符，虽然看似一长串长度已经超过了父级元素的长度，但是计算机是当作一个字符处理的，所以自然不会换行，汗😓

最近在W3School回炉重造，跟着一行行代码敲，同时在MDN上一个个看CSS的各类属性，打算学习框架的同时把基础夯实，因此列出一些非常细微但是又十分有用，或让人喜笑颜开，或因不得知而让人debug时暴跳如雷的一些小属性。

white-space: nowrap;

首先肯定从解决前言那种问题开始，之前我遇到的问题是，行内元素超过块级元素宽度时会自动折叠，那如果不想让行内元素折叠呢？特别是为了营造某些特殊效果时，例如横向的滚动菜单。

可以用white-space: nowrap;来解决这个问题，这个属性用来解决元素中空白部分如何处理的问题，有以下几个属性：
normal（默认），nowrap，pre，pre-line，pre-wrap，initial，inherit
个人认为需要注意的即：
nowrap，
pre，
prel-ine，
pre-wrap
且看以下几组对比：

Normal

这是值为normal时的样子，为了方便显示背景和文字的对比，我将背景设置了颜色。

Nowrap

这是nowrap的样子，没有任何换行

那Pre呢？

pre也没有，因为pre只为原文本中的回车换行（而我们知道在一般代码内的换行和多余空格只会被当成网页上的一个空格处理）：

Pre：当字符串有换行的时候

文本被换行了，但是依旧超出父元素的宽度

Pre-line

pre-line会在代码字符中有回车换行的地方换行，并且遵守父级元素宽度限制。

Pre-wrap

pre-wrap和pre-line有细微的区别，pre-line尊重父级元素宽度，尊重字符串换行，同时尊重多余空格，个人认为是实现原生编辑比较自然的一种方式了，推荐。

简单来说：
pre：尊重字符串内换行；
pre-line： 尊重字符串内换行，尊重父级元素宽度；
pre-wrap：尊重字符串内换行，尊重父级元素宽度，尊重字符串内多余空格；