iframe overflow 换行而不是滚动条

Question

我创建了一个显示服务器目录列表的网站。在后端，所有目录都被索引并显示在另一个名为 dirpage 的网页中。所以我在 mainpage 中使用了一个 iframe 来显示 dirpage 的内容。主页和主页运行良好。但是当 dirpage 显示在 iframe 中时，内容会溢出。 iframe 宽度限制为 <div> 宽度。问题是 iframe 溢出正在换行显示内容。这是主页。

<head>
<style>
    #divmain{
        display: flex;
        flex-direction: row;
    }
    #div1{
        background: rgb(244, 236, 225);
        width: 30%;
        height: 600px;
        float: left;     
    }
    #div2{
        background: black;
        width: 70%;
        height: 600px;
        float: right;
    }
    #button1{
        height:44px;
        width:50px;
        float:left;
    }
    #button2{
        height:44px;
        width:50px;
        float:left;
    }
    #input1{
        display:none;
        float:right;
        width:295px;
        height:44px;
    }
    #iframe1{
        height:500px;
        width:390px;
        background: transparent;
        overflow: scroll;
    }
   
</style>
</head>

<body onmousedown="buttonclick1(event)">
    <h1>online storage</h1>
    <div id="divmain">

        <script>        
            function buttonclick1(e){
                if (e.target.id !== "input1")
                    document.getElementById("input1").style.display="none"                    
            }
            function buttonclick2(e){
                if (e.target.id == "button1")
                    document.getElementById("input1").name="folder" 
                if (e.target.id == "button2")
                    document.getElementById("input1").name="file"                     
            }         
        </script>

        <div id="div1">
            <hr style="margin-top:0;">
            <button id="button1" onclick="document.getElementById('input1').style.display='block'" onmousedown=buttonclick2(event)><a>Folder</a></button>
            <button id="button2" onclick="document.getElementById('input1').style.display='block'" onmousedown=buttonclick2(event)><a>File</a></button>
            <form id="form1" action="session" >
                <input id="input1" type="text" name="">
            </form><br><br>      
            <hr style="margin-top:10px;"><br>

            <iframe id="iframe1" src="dirpage.html">
            </iframe>
        </div>
        

        <div id="div2">  
        </div>  
    </div>    
</body>

这是目录页和主页的图片。我无法添加dirpage的代码。因为内容非常敏感。它只包含 <p> 个段落和按钮。

现在我需要做的是用滚动条显示溢出的内容。不换行。我试过了overflow: scroll。但它不起作用。任何帮助将不胜感激。

Answer 1

据我了解，您的问题是 iframe 没有按宽度扩展，因此当超过宽度时不是停留在一行而是创建新行？

编辑：好的，在测试您的页面后，这就是我发现的内容。最初从明文开始后，浏览器 css 给文本一个带有 white-space: pre-wrap; 样式的 <pre> 标签，您的问题可以通过删除 pre-wrap 来解决css 中的样式，问题是您只能从检查元素菜单中编辑它。另一方面，在尝试使用 html 文件而不是 txt 文件后，“换行符”仅在向文本添加空格键后发生，这是预期的。我会看看我能从这里做什么，但我想我会更新到而不是让你等待。

Answer 2

我最近遇到了同样的问题，也尝试了 overflow: hidden;，但没有成功，因为 div 没有限制。
因此，您需要限制 div 的大小，例如：max-width: "width" 和 max-height: "height"。或者，如果您不希望它缩放，则只需定义固定的宽度和高度。
相关回答：Overflow Scroll css is not working in the div

编辑：如果 overflow: hidden; 不起作用，请尝试将其应用于 overflow-x: hidden; & overflow-y: hidden;

iframe overflow 换行而不是滚动条

Iframe overflow takes a new line instead of a scroll bar

html

css

iframe

overflow