好用的css之white-space属性

最近想实现一个小需求，服务端返回来的内容是通过textarea标签输入的，在输入时是可以换行输入内容的，前端想实现根据返回来的内容自动换行，想了一下用富文本编辑器代替textarea太麻烦了，在google寻找一种更easy的方法，无意间发现了一个很强大的css属性white-space，完美实现这个需求，重要的是没有兼容性简直太棒了！

浏览器支持

所有浏览器都支持white-space属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

定义和用法

white-space属性设置如何处理元素内的空白。

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

这个需求就是用这个属性值pre-line完美实现的。

属性值

各个属性值的效果

完美效果

现在看到pre-line属性值依然是有缺陷的，内容前有一个空行，这个是标签与内容之前的换行造成的，只需让内容紧随标签就可以。

简单好用的css还有很多很多，建议大家多多拜读张鑫旭的博客，发现更多的css神秘世界，下次介绍强大的pointer-events属性哈！