最近想实现一个小需求,服务端返回来的内容是通过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属性哈!
领取专属 10元无门槛券
私享最新 技术干货