在我折叠 SPAN 的可见性后，SPAN 内的 BR 仍然可见 [重复]答案

【问题标题】：a BR inside a SPAN remains visible after I COLLAPSE the visibility of the SPAN [duplicate]在我折叠 SPAN 的可见性后，SPAN 内的 BR 仍然可见 [重复]
【发布时间】：2020-05-11 17:59:55
【问题描述】：

这段 HTML：

<table>
  <tr>
    <td> 1 </td>
    <td> 2167 </td>
    <td> Cliff Richard & the Shadows
      <span onclick='Expl(1)'> 
      *) 
      <span id=c1 style='visibility:collapse';> 
        <br>Composed of:  
        <br> - Cliff Richard & the Shadows 
        <br> - Cliff Richard 
        <br> - Shadows 
      </span>
      </span>
    </td>
    <td onclick='iLnk(196702)'> 1 </td>
    <td> 86 </td>
  </tr>

</table>

显示<br> 标记，即使跨度具有可见性折叠。如果我将可见性更改为“可见”（在例程 Expl(1) 中），则文本会按照应有的方式显示，并尊重中断。

我必须更改什么（如果可能）以在折叠 br 标记时看不到它们？

【问题讨论】：

但仅当元素是表格元素时 - 使用 display:none 看不到空间，使用 visibility:hidden 仍然占用空间
Span 不是表格元素
Display: none 隐藏一切，正如我所愿。显示所有文本的 Display 属性是什么？换句话说：如果我想从可见翻转到不可见，我为后者编码“display：none”，但第一个的代码是什么？
最好是切换一个类：document.getElementById("c1").classList.toggle("hiddenClass",reasonToHide)
错误：reasonToHide 未定义

标签： html css google-chrome

【解决方案1】：

visibility:collapse 仅适用于表格元素，不适用于跨度。在除 table 元素之外的任何元素上，它的行为都与 visibility:hidden 完全相同，这会强制元素保留它原本会保留的所有空间。

您可能正在寻找display: none，它将完全删除元素的大小。

* { outline: 1px solid red }

<table>
  <tr>
    <td> 1 </td>
    <td> 2167 </td>
    <td> Cliff Richard & the Shadows
      <span onclick='Expl(1)'> 
      *) 
      <span id=c1 style='visibility:collapse'> 
        <br>Composed of:  
        <br> - Cliff Richard & the Shadows 
        <br> - Cliff Richard 
        <br> - Shadows 
      </span>
      </span>
    </td>
    <td onclick='iLnk(196702)'> 1 </td>
    <td> 86 </td>
  </tr>

</table>

对

* { outline: 1px solid red }

<table>
  <tr>
    <td> 1 </td>
    <td> 2167 </td>
    <td> Cliff Richard & the Shadows
      <span onclick='Expl(1)'> 
      *) 
      <span id=c1 style='display:none'> 
        <br>Composed of:  
        <br> - Cliff Richard & the Shadows 
        <br> - Cliff Richard 
        <br> - Shadows 
      </span>
      </span>
    </td>
    <td onclick='iLnk(196702)'> 1 </td>
    <td> 86 </td>
  </tr>

</table>

【讨论】：

这是一个骗子，已经关闭了