css元素自动换行_理解css中的whitespace空白区域

white-space 表示 ‘空白区域’。

CSS中这个属性的用来表示如何处理元素中的空白符， 那在html中什么是空白符呢？   主要有：换行，空格，TAB等。

下面看看white-space可以设置的值：

normal：  (默认值)典型的，最大的特点就是连续的空白符会被合并成一个，换行符算成空白符， 但是如果容器很窄，元素又很长，里面又包含了换行符的话，换行符会生效。

对中文字符来讲，每个字符直接都是有空的，但是英文字母之间是没有空的，是一体的。

nowrap：wrap是包、裹的意思， nowrap，就是“不要包裹，不要这些空白符” ，那么什么都不管，全部都在一行显示， 这个比较霸道。

pre： 这个是缩写，并不是那个前缀，完整表达应该是：preserve: 保留、维持原样，那所有的空白符都会显示了，这个对从文本复制到html显示就非常又好了。

pre-wrap: 这个在preserve保留所有空白符的基础上加上了wrap包裹，加了wrap就加了根据所在容器的宽度换行的，也就是一行文本太长会被打断换行。保留原样的同时，一行太长的话给换个行，方便查看。

pre-line:  和pre-wrap的不同点是， 把一行line中的多个空白符合并成一个， line头和尾的空白符不显示。

break-spaces: 这个和pre-wrap基本相同，但是保留所有空白，每个保留的空白的地方都能因为太长而自动换行。

break-spaces个值在IE、Safari、Firefox for Android等里面是无效的。

pre pre-line pre-wrap 这三个所有浏览器基本上都能用。

最后不得不说

  word-wrap: break-word;      /* IE 5.5-7 */