white-space-collapse 浏览器什么时候才能支持

本文探讨了未实现的 CSS white-space-collapse 属性及其作用,该属性可以用来设置或检索对象内的空格字符处理方式。尽管该提案未能获得广泛支持,但了解其功能对于前端开发者来说仍然有价值。

早在 2007 年就有人向 w3 组织提交了css 草案 white-space-collapse 。不过一直没有得到实现,而且各大浏览器貌似也不想实现。先看下 white-space-collapse 的作用吧

white-space-collapse 用于设置或者检索对象内包含的空格字符,属性有:

  • collapse 使用一个单一的字符序列呈现空白(或在某些情况下,没有字符)。
  • preserve 呈现所有的空白,换行符将被保留
  • preserve-breaks 抛弃所有空白,但保留空白
  • discard 抛弃所有空白

也就是说 如果采用了 white-space-collapse:discard;那么下面的代码

<span>字</span>
<span>符中间有空白</span>

 而现在由于没有实现white-space-collapse,我们可能要用很多方法来解决中间出现空白的问题,其中最简单也是最繁琐的方法是,手工去掉空白

<span>字</span><span>符中间没有空白</span>

这种方法很繁琐,但是没有副作用。

各大浏览器要实现这个的话,想想问题还真多,比如直接的空白符号和转义 &nbsp; 这种2种写法应该是有不同处理的,很可能影响太大了。

 

 

<table id="c8407039" width="100.00%" style="table-layout:fixed;border:1px solid #8d9de2;"> <tbody> <tr> <td style="border-right-color:#E6E7E8 !important;border-bottom-color:#E6E7E8;border-top-color:#E6E7E8;" width="100%" align="center"><br><img loading="lazy" height="42mm" src="https://pzdds.net/wxunit/lichengcheng__7ce69622-e999-4545-b3b3-812e45bfafca/jlFunctionSectionUnit/649b4f0881834d7f91a01d166fd14aad/P181-2024/graphics/36000000250960.jpg?t=1763101583981" scope="local" width="42mm"></td><td style="border-bottom-color:#E6E7E8;border-top-color:#E6E7E8;border-right-color:#E6E7E8;" width="100%" rowspan="3" align="center"><br><span id="dc1f9b8d" class="title2" style="white-space: pre-wrap;display: inline;" parenttag="p">疲劳监测警告灯*</span><span id="6733430b" class="title2" style="white-space: pre-wrap;display: inline;"></span> </td> <td style="border-bottom-color:#E6E7E8;border-top-color:#E6E7E8;" width="100%" align="center"><br><span id="1ee4f486" class="title2" style="white-space: pre-wrap;display: inline;" parenttag="p">一级疲劳监测报警</span><span id="e19a19c6" class="title2" style="white-space: pre-wrap;display: inline;"></span> </td> </tr> <tr> <td style="border-right:1px solid #E6E7E8 !important;border-bottom:1px solid #E6E7E8;border-top:1px solid #E6E7E8;" width="100%" align="center"><br><img loading="lazy" height="42mm" src="https://pzdds.net/wxunit/lichengcheng__7ce69622-e999-4545-b3b3-812e45bfafca/jlFunctionSectionUnit/649b4f0881834d7f91a01d166fd14aad/P181-2024/graphics/36000000250961.jpg?t=1763101583981" scope="local" width="42mm"> </td> <td style="border-bottom-color:#E6E7E8;border-top-color:#E6E7E8;" width="100%" align="center"><br><span id="46e6d152" class="title2" style="white-space: pre-wrap;display: inline;" parenttag="p">常亮:疲劳监测功能故障</span><span id="2578eee9" class="title2" style="white-space: pre-wrap;display: inline;"></span><br><span id="58a3bd69" class="title2" style="white-space: pre-wrap;display: inline;" parenttag="p">闪烁:二级疲劳监测报警</span><span id="541ff4b4" class="title2" style="white-space: pre-wrap;display: inline;"></span> </td> </tr> <tr> <td style="border-right:1px solid #E6E7E8 !important;border-bottom:1px solid #E6E7E8;border-top:1px solid #E6E7E8;" width="100%" align="center"><br><img loading="lazy" height="42mm" src="https://pzdds.net/wxunit/lichengcheng__7ce69622-e999-4545-b3b3-812e45bfafca/jlFunctionSectionUnit/649b4f0881834d7f91a01d166fd14aad/P181-2024/graphics/36000000250962.jpg?t=1763101583981" scope="local" width="42mm"> </td><td style="border-bottom-color:#E6E7E8;border-top-color:#E6E7E8;" width="100%" align="center"><br><span id="bc708c33" class="title2" style="white-space: pre-wrap;display: inline;" parenttag="p">疲劳监测传感器被遮挡</span><span id="a4a5da73" class="title2" style="white-space: pre-wrap;display: inline;"></span> </td> </tr> </tbody> </table> <style> table,table td,table th{ border: 1px solid #8d9de2; } table{ border-collapse:collapse; border-spacing:0; } *{ padding: 0; } </style>其他的都是正常的,只有第一列的第二行和第三行不正常,右边线
最新发布
11-15
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值