visibility:collapse无法折叠<br>元素，如何用visibility替代实现折叠效果？

visibility: collapse 是针对表格元素（行、列、行组、列组）设计的专用属性，对 <span> 这类非表格普通元素来说，它的表现和 visibility: hidden 完全一致：仅隐藏元素的可见性，不会释放元素原本占据的布局空间，所以你代码里 <span> 内部的 <br> 换行产生的高度会完整保留，达不到折叠效果。

以下两种方案均未修改display属性，完全符合业务限制：

方案1：普通元素场景，visibility搭配尺寸置零 #

核心逻辑是用visibility控制可见性的同时，将元素的所有影响布局的尺寸属性置零，完全释放占位空间，最终效果和display: none完全一致：

a<span style="visibility: hidden; line-height: 0; font-size: 0; margin: 0; padding: 0; overflow: hidden;"><br>invisible text<br><br></span>a

该方案兼容性覆盖所有主流浏览器，不需要修改原有标签结构。

方案2：可修改标签场景，使用表格元素原生支持collapse #

如果业务允许调整容器标签为表格类元素，可直接使用visibility: collapse的原生能力，不需要额外添加辅助CSS：

<table>
  <tr><td>a</td></tr>
  <tr style="visibility: collapse">
    <td><br>invisible text<br><br></td>
  </tr>
  <tr><td>a</td></tr>
</table>

该方案所有浏览器表现完全一致，没有兼容性问题。

内容的提问来源于stack exchange，提问作者Infigon