Question

我的句子很少。在第一句末尾（在这一行），我想添加将保留故事的其他部分的剧透。我尝试这样做，但点击更多.. - 我的文字跳到下一行。我需要在一行中继续使用更多文本...请不要告诉我任何脚本，我只想使用HTML + CSS。感谢。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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，详细信息，摘要}} display-＆gt; inline ，而不是 inline-block; inline-block预订整行的工作并没有，但只使用内联作品作为一行，您可以添加该行中的任何内容，并通过显示：无; 点击时关闭摘要详细信息>细节[开] .summery {显示：无;}

当你点击它时，这将关闭你的**** MORE ****。

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

2 个答案: