For some strange reason, visibility:collapse does not collapse the <br> (new line) element

I want to use visibility instead of display. I realize that there are a lot of options for visibility, and there could be an alternative. How can I achieve this?

a<span style=visibility:collapse><br>invisible text<br><br></span>a
<br><br>
b<span style=display:none><br>invisible text<br><br></span>b

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The "collapse" mode works just like "hidden" most of the time. The content is not shown (your "invisible text") but the element still affects the layout as if it were.

That mode is most useful for table rows and flex items.