如何通过CSS让容器自适应适配<embed>文本且不产生滚动条

核心结论 #

<embed>属于浏览器调用独立插件渲染资源的替换元素，渲染过程中不会对外暴露内部加载文本的实际尺寸，height: auto、overflow、object-fit这些CSS属性对它的内部渲染逻辑完全无效。你之前手动写死高度是使用<embed>时唯一能凑合用的方案，不存在纯CSS调整就能让它自动适配内容高度、消除垂直滚动条的方法。

推荐替代方案 #

直接放弃<embed>加载纯文本/代码文件，改用JS拉取文本内容插入页面渲染，就能完美实现自适应高度、无多余垂直滚动条的需求，同时适配内容变动、窗口缩放换行、多文件不同高度的场景。

无依赖原生实现（最推荐）

把原有<embed>替换为<pre>容器，通过fetch拉取目标文本文件内容填充即可，完整示例代码：

<head>
    <meta charset="UTF-8" />
    <title>Matroid Partitioning</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        figure { border-style: solid; width: 90%; margin-left: 5%; }
        .code-pre {
            width: 100%;
            padding: 1rem;
            white-space: pre-wrap;
            word-break: break-all;
            font-family: Consolas, Monaco, monospace;
            overflow-x: auto; /* 仅当宽度极窄内容放不下时显示横向滚动条，垂直方向完全随内容撑开 */
        }
    </style>
</head>
<body>
    <figure>
        <figcaption>Sample code for K<sub>19</sub>:</figcaption>
        <pre class="code-pre" data-file="K19.code"></pre>
    </figure>

    <script>
        // 批量自动加载所有标记了data-file的代码块
        document.querySelectorAll('[data-file]').forEach(async el => {
            const resp = await fetch(el.dataset.file)
            el.textContent = await resp.text()
        })
    </script>
</body>

这个方案的优势：

• 垂直高度完全由内容决定，不管内容增减、窗口缩放导致文本换行变多，都不会出现垂直滚动条
• 页面内嵌入多个不同长度的文本文件时，不需要单独给每个元素设置高度，复用同一段JS即可
• 样式完全可控，后续要加代码高亮、行号、复制按钮等功能都很方便

备选：同域场景下用iframe替代

如果需要保留嵌入内容的独立文档上下文，且文本文件和页面同域，可以用<iframe>替换<embed>，在加载完成后动态设置高度匹配内容：

<iframe
  src="K19.code"
  frameborder="0"
  width="100%"
  onload="this.style.height = this.contentDocument.documentElement.scrollHeight + 'px'"
></iframe>

注意这个方案在跨域场景下会因为权限限制拿不到内部内容高度，无法使用，优先选前面的原生拉取渲染方案。

内容的提问来源于stack exchange，提问作者Ray Butterworth