Question

我设计了一个html iframe，我想使用word-wrap属性，即它应该将长字断开到下一行。但是，相反的是，对于长词，它会添加一个水平滚动条而不是将该词分成下一行。

我尝试使用“overflow：hidden”属性隐藏滚动条，但没有任何反应。

我可以在这里使用一些帮助。

以下是iframe的html代码：

<div id="main_frame" >
<iframe id="main_frame" src="homedept.php" name="iframe_a"></iframe>
</div>

CSS是：

div#main_frame
{
 float: left;
margin-top:198px;
margin-left:5px;
float:left;
position:relative;
width:100%;
height:900px;
z-index: 0;
word-wrap:break-word;
}

iframe#main_frame
{
float:left;
margin-left: 30px;
margin-right: 300px;
float:left;
border:none;
word-wrap:break-word;
width: 78%;
height:70%;
z-index: 1;

}

感谢@tyriar的回复，我现在已经将word-wrap属性设置为原始页面。仍然没有任何反应。

<div id="display_posts">


<?php //php echoes some text here ?>

</div>

CSS代码是：

#display_posts
{
word-wrap:break-word;
}

Answer 1

您无法将word-wrap应用于iframe，这是一个完全独立的页面，原始页面中的样式将不适用。您需要更改iframe点的页面上的样式。

同样id个属性必须是唯一的，您已在id="main_frame"和iframe上设置了div。

更新

如果word-wrap:break-all上有iframe，那么页面的宽度可能会引入滚动条。确保您的元素与页面正确缩小。如果您在浏览器的iframe中加载页面，则应该能够缩小窗口大小，而不会出现水平滚动条。如果有，那么这是该页面最小宽度的问题。

Answer 2

您定义了相同的ID 2 times，但ID必须是unique，您不能将其声明两次。

因此请使用class而不是ID

同时iframe调用其他页面，您在原始页面中定义了word-wrap，因此不适用。

Answer 3

尝试

word-break:break-word

或

word-break:break-all

尝试使用class而不是ID，因为ID应该是唯一的。

自动换行属性似乎不适用于CSS

3 个答案:

更新