css - 显示`的内容`当`` 已关闭

Question

有没有办法在<details>折叠时显示元素的内容？

我想<details>根据元素是否具有open属性来设置元素内容的不同样式。

下面是我正在尝试完成的事情类型的示例。我希望在<details>元素折叠时剪切文本，但在展开时增长以显示其所有内容。（此处剪切文本和扩展内容的确切实现无关紧要。重要的部分只是让<p>标签在<details>折叠时显示。）

details[open] p {
  flex-grow: 1;
}

details:not([open]) p {
  display:       inline;
  max-height:    3em;
  text-overflow: ellipsis;
}

<details>
  <summary>This is the summary element.</summary>
  <p>This is the details element.</p>
</details>

Answer 1

不，您无法做任何事情来显示内容。原因是details元素的内部实现：

如您所见，通过将内部slot通过内联样式设置为display: none;.

由于您既不能通过 Javascript 访问影子根，也不能通过外部 CSS 规则定位任何元素，所以在这里您无能为力。