如何在一行句子中插入<details>

Question

我有几句话。在第一句话的末尾（这一行），我想添加剧透，这将保留故事的其他部分。我正在尝试这样做，但是当单击“更多..”时 - 我的文本跳到下一行。我需要在一行中继续显示更多...请不要告诉我任何脚本，我只想使用 HTML + CSS。谢谢。

details {
  display: inline-block;
}
summary {
  display: inline-block;
}

<blockquote>
  There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
  <details>
    <summary>
      More..
    </summary>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </details>
</blockquote>

Answer 1

1）使所有复制元素显示“内联”，而不是内联块（因此它们的工作方式类似于跨度而不是div）

2) 打开详细信息时隐藏摘要元素“更多..”，方法是将其显示设置为无。

代码如下：

blockquote {
  display: inline;
} 
 
details {
  display: inline;
}

summary {
  display: inline;
}

details[open] summary {
  display: none;
}

<blockquote>
  There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
  <details>
    <summary>
      More..
    </summary>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </details>
</blockquote>

Answer 2

使所有标签 {{ blockquote,details,summary }} display->inline 而不是 inline-block;inline-block 可以预订整条线并且不采取任何措施，但仅使用内联作为线并且您可以在该行中添加任何内容，并在单击时通过 display:none; 关闭摘要详细信息，例如 details[open].summery{display:none;}

当您点击它时，这将关闭您的****更多****。