纯HTML页面中如何实现行内「显示更多/收起文本」功能？

首先要明确：你遇到的换行问题，本质是<details>是块级元素，而<p>这类容器只能包含行内元素，浏览器会自动把<details>从<p>里拆分出来，导致段落被截断，出现多余换行——你的示例代码里，浏览器实际解析后的结构是：

<p> I want this text on the same line  </p>
<details>   <summary>as this text</summary>  and this text</details>
<p></p>

针对仅支持纯HTML的场景（如维基编辑），可以用这些折中方案：

• 强制行内包裹（非标准但实用）
  用<nobr>标签把<details>和相邻文本包裹起来，强制浏览器不换行。虽然<nobr>是HTML非标准标签，但几乎所有主流浏览器和维基系统都支持：

  I want this text on the same line <nobr><details><summary>as this text</summary>and this text</details></nobr>
  

• 行内样式（若维基允许）
  很多维基环境其实允许使用行内style属性（并非全量CSS，只是基础样式），直接给<details>设置行内显示，彻底解决换行问题：

  I want this text on the same line <details style="display: inline;"><summary>as this text</summary>and this text</details>
  

• 列表场景适配
  若在项目列表中使用，不要把列表项内容嵌套在<p>里，直接把<details>和列表文本放在同一行，配合行内样式（或<nobr>）：

  <li>
    列表项内容 <details style="display: inline;"><summary>(展开更多)</summary>隐藏的详细内容</details>
  </li>
  

如果你的场景完全禁止任何CSS（包括行内样式），纯HTML下确实没有100%完美的方案——毕竟<details>的块级行为是浏览器内置样式，无法通过纯HTML标签修改，但上面的方案能在绝大多数实际场景中满足需求。

内容的提问来源于stack exchange，提问作者Christopher Pratt