强制 <summary> 表现为 display:inline 而不是 inline-block答案

【问题标题】：Force <summary> to behave as display:inline instead of inline-block强制 <summary> 表现为 display:inline 而不是 inline-block
【发布时间】：2021-01-12 03:09:09
【问题描述】：

我想为纯 CSS 弹出窗口使用 <details> / <summary> 标签，但 <summary> 表现为内联块，我无法将其更改为内联。

有什么方法可以强制<summary> 表现为 display:inline 而不是 inline-block？

<!DOCTYPE html>
<html>
  <head>
    <style>

      summary {
        color: red;
      }
      
      summary::-webkit-details-marker {
        display: none;
      }

      details, summary {
        display: inline;
        /* hyphens: manual;/ */
        /* word-break: break-all; */
        /* overflow-wrap: anywhere; */
        /* white-space: unset; */
      }

      .mimic {
        color: darkseagreen;
        display: inline-block;
      }

    </style>
  </head>
  <body>
    <span>
      I would like to use the &ltdetails&gt / &ltsummary&gt tags for
      pure CSS popups,
      <details>
        <summary>
            but &ltsummary&gt behaves as inline-block
        </summary>
        (I'm fine with &ltdetails&gt)
      </details>
      and I cannot change it to inline. Is there any way to force &ltsummary&gt
      to behave as display:inline instead of inline-block?
      <br><br>
      I would like to use the &ltdetails&gt / &ltsummary&gt tags for
      pure CSS popups,
      <span class="mimic">
        but &ltsummary&gt behaves as inline-block
      </span>
      and I cannot change it to inline. Is there any way to force &ltsummary&gt
      to behave as display:inline instead of inline-block?
      <p>
        Just start to play with the width of the viewport...
      </p>
    </span>
  </body>
</html>

【问题讨论】：

运行代码 sn-p 并检查它...元素
以及
是内联的。
最终目的是什么？通常是内容上方的弹出窗口，您是指像工具提示这样的东西，还是只想隐藏部分文本？然而，这不是细节的目的；）
也许你需要从一个带有标题属性和 tabindex 的内联框开始来捕捉点击：codepen.io/gc-nomade/pen/wvGOggr
details 多亏了 js...所以，不是纯的（即使是内联也不会内联）。它的行为取决于设备浏览器。我讨厌这个，但这是真的 - 使用 js - 简单的 onclick 将比非常花哨和复杂的 css 更好。或者使用纯 html 元素，如 span:hover::after{ content: attr(title) <span title="nice title">hover me </span>
@G-Cyrillus focus-tabindex-pointer-events 解决方案非常适合控制方式和内联方式，但我无法使工具提示的“宽度”反应（足够）。我试过margin-auto、left-right-px/auto、width%。不幸的是，他们都没有工作。还是非常感谢

标签： html css popup inline display

【解决方案1】：

display: contents; 可以做到，但它会表现得很奇怪：

summary {
  color: red;
}

summary::-webkit-details-marker {
  display: none;
}

details,
summary {
  display: contents;
  /* hyphens: manual;/ */
  /* word-break: break-all; */
  /* overflow-wrap: anywhere; */
  /* white-space: unset; */
}

.mimic {
  color: darkseagreen;
  display: inline-block;
}

<span>
      I would like to use the &ltdetails&gt / &ltsummary&gt tags for
      pure CSS popups,
      <details>
        <summary>
            but &ltsummary&gt behaves as inline-block
        </summary>
        (I'm fine with &ltdetails&gt)
      </details>
      and I cannot change it to inline. Is there any way to force &ltsummary&gt
      to behave as display:inline instead of inline-block?
      <br><br>
      I would like to use the &ltdetails&gt / &ltsummary&gt tags for
      pure CSS popups,
      <span class="mimic">
        but &ltsummary&gt behaves as inline-block
      </span> and I cannot change it to inline. Is there any way to force &ltsummary&gt to behave as display:inline instead of inline-block?
<p>
  Just start to play with the width of the viewport...
</p>
</span>

【讨论】：

Temani & @black_blue：你们的两个解决方案都非常棒。我有机会将 Temani 标记为已接受，但两者都会做。回答@G-Cyrillus 的问题：你说得对，我应该更具体。我需要这个作为工具提示。不幸的是，一旦
是 [open]，它会在其内容之后换行。因此我最终得到了黑蓝色的解决方案，因为我意识到悬停也适用于触摸控制，如果要离开中性区域被触摸。在功能与简单的平衡上，我对这种方法很好。伙计们干杯！
总结解决方案： • focus-tabindex-pointer-events 在控制和内联方面是完美的，但工具提示的“宽度”不是反应性的（足够） • :hover::after 在控制方面有限制，如离开在触摸屏上，您需要点击到中性区域 • details-summary-display：内容是内联的，直到详细信息（工具提示）关闭，一旦打开，在之后会出现换行符 • javascript：适用于 virtual-DOM :