iframe溢出采用新线而不是滚动条
我创建了一个网站，该网站显示服务器中的目录列表。在后端，所有目录都被索引，并在另一个称为dirpage的网页中显示。因此，我在主页上使用了一个iframe来显示dirpage的内容。主页和迪尔帕格运作良好。但是，当iframe中显示dirpage时，内容会溢出。 iframe宽度仅限于＆lt; div＆gt;宽度。问题是iframe Overflow正在采用一条新行以显示内容。 这是主页。
<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和主页的图像。我无法添加dirpage代码。因为内容非常敏感。除＆lt; p＆gt;段落和按钮外，它不包含其他任何内容。
现在我需要做的是用滚动条显示溢出内容。 不使用新线。 我尝试了溢出：滚动。但这不起作用。任何帮助将不胜感激。
I created a web site that shows the directory list in the server. In backend all the directories are getting indexed and shown in an another webpage called dirpage. So I used an iframe in mainpage to show the content of dirpage. The mainpage and dirpage are working great. But when the dirpage is shown in the iframe, the content overflows. The iframe width is limited to the <div> width. The problem is the iframe overflow is taking a new line to show the content.
Here is the main page.
<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>
Here is an image of dirpage and mainpage. I can't add the code of dirpage. because the content are very sensitive. It doesn't contain anything other than <p> paragraphs and buttons.
Now what I need to do is show the overflown content with a scroll bar.
Not with a newline.
I tried overflow: scroll. But It's not working. Any help would be greatly appreciated.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
据我了解，您的问题是，iframe不是按宽度扩展，因此在超过宽度时，它不是在创建新线路时停留在一条线上？
编辑：
好的，在测试您的页面后，这就是我发现的。最初，从明文开始之后，它具有浏览器的CSS，这些CSS给出了文本的
＆lt; pre＆gt;标记带有white space的标签：pre-wrap; pre-wrap;样式，您的样式可以通过从CSS中删除预装样式来解决问题，问题是您只能从“ Inspect Element”菜单中编辑它。另一方面，尝试使用HTML文件而不是TXT文件之后，“线路断裂”仅在将空格键添加到文本后才发生，这是可以预期的。
我会从这里看到我可以做什么，但我认为我会更新到，而不是让您等待。
From what I understood, your problem is that the iframe is not expanding by width and thus instead of staying on one line when exceeding the width it's creating a new line?
EDIT:
Ok after testing your page here's what I found. Initially after starting with a plaintext, it had css from the browsers that gave the text a
<pre>tag with awhite-space: pre-wrap;style, your problem can be fixed by removing the pre-wrap style from the css, the problem is you can only edit it from the Inspect Element menu.On the other hand, after trying with an html file instead of a txt file, the "line break" only happens after adding a spacebar to the text, which is expected.
I'll see what I can do from here but I thought I would update to as opposed to keeping you waiting.
我最近遇到了同样的问题，并且还尝试了
溢出：隐藏;，但是由于DIV可以得到的大小没有限制。因此，您需要限制Div的大小，例如：
最大宽度：“ width”和max-height：“ height”。或者，如果您不希望它扩展，则只定义固定宽度和高度。相关答案：溢出卷轴CSS在div中不起作用
编辑：
如果
溢出：隐藏;无效，请尝试将其应用于Overflow-X：hidden; ＆amp;溢出Y：隐藏;I recently had the same issue, and also tried
overflow: hidden;, but it didn't work because there isn't a limit of how big the div can get.So you need to limit the size of the div like:
max-width: "width"andmax-height: "height". Or just define the fixed width and height if you don't want it to scale.Related answer: Overflow Scroll css is not working in the div
Edit:
If
overflow: hidden;didn't work try applying it foroverflow-x: hidden; & overflow-y: hidden;