首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

好用的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属性哈!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180728G0K4H700?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券