Question

我遇到以下情况：

<body>
<div style="width:300px;border:1px dotted black;" id="myhopelessdiv">
    This is a sample evil image:
    <img src="https://www.google.com/images/srpr/logo11w.png"/>
    This is a sample evil inside table:
    <table width="500" border="1">
      <tr><td>Hello</td><td>World</td></tr>
    </table>
    And some sample evil inside div:
    <div>
      With some evil content:
      Some info...<br>
      -------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br>
      And some other info...<br>
   </div>       
</div>
</body>

问题是“myhoplessdiv”中的所有内容都是我无法更改的外部内容，但我希望它遵循我需要的规则，即内容适合我设置的某个宽度（在此示例中为300px）。是否有任何样式组合我可以在“myhoplessdiv”上应用，以使子元素能够word-wrap:break-word，图像适合div，或者至少让它们不显示在div之外？

我对div中的内容没有任何影响，我可以用蹩脚的HTML来计算，只是希望控制它显示的区域...

Answer 1

#myhoplessdiv {
    word-wrap:break-word;

    /* maybe you were looking for this */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;

    /* everything else */


    /* don't forget your width/height */
    width:400px;
    height:400px;
}

您应该为div设置有限的宽度和高度。

即使你的#myhopeless div中有填充，边距等，它也会坚持你的设定维度。 Box Sizing | CSS-Tricks

您还可以overflow:hidden;隐藏div内的溢出内容。

您可能需要将word-break: break-word;更改为word-break: break-all;。

修改

当我查看您的代码时，这是一个快速的解决方案。应该从一开始就这样做。

#myhopelessdiv > div, #myhopelessdiv img, #myhopelessdiv table { width:100%; }

你至少应该期待你会得到什么样的内容，也许是他们的ID或CLASSES。

注意：如果你不知道你将获得什么样的数据/内容，并且他们的容器没有统一性，这可能不适合你。

此外，关于使用overflow:hidden;，您可以执行overflow:auto;，这样您就可以使用此滚动功能。

Answer 2

为什么不使用：

#myhopelessdiv {
  overflow: hidden;
}

因此，如果内容大于你的div，那么它就会被切断。

Answer 3

只要它不在iframe中，您就可以在#myhopelessdiv下应用样式。

#myhopelessdiv {
    width: 700px !important; /* !important is to override the inline style */
}
#myhopelessdiv * {
    word-break: break-all;
}

Answer 4

使用此css

#myhopelessdiv img, #myhopelessdiv table{
max-width:300px;
}

这肯定会有用。

如何在div中控制第三方内容

4 个答案: