我遇到了以下情况：
<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 计数，只是想对它的显示区域进行一些控制......
#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 设置有限的宽度和高度。
即使您的 #myhopelessdiv中有填充，边距等，它也会坚持您设置的尺寸。包装盒尺寸 |CSS技巧
您还可以overflow:hidden;隐藏div 中的溢出内容。
您可能需要将word-break: break-word;更改为 word-break: break-all; 。
编辑
当我查看您的代码时，这是一个快速的解决方案。应该从一开始就这样做。
#myhopelessdiv > div, #myhopelessdiv img, #myhopelessdiv table {
width:100%;
}
你至少应该期待你会得到什么样的内容，也许是他们的ID或类。
注意：如果您不知道将获得哪种数据/内容，并且它们的容器没有统一性，那么这对您来说可能不是一个好的解决方案。
另外，关于overflow:hidden;，您可以改为执行overflow:auto;，以便具有此滚动功能。
为什么不使用：
#myhopelessdiv {
overflow: hidden;
}
因此，如果内容大于您的div，则将其简单地切断。
只要它不在 iframe 中，您就可以在 #myhopelessdiv 下应用样式。
#myhopelessdiv {
width: 700px !important; /* !important is to override the inline style */
}
#myhopelessdiv * {
word-break: break-all;
}
使用此 css
#myhopelessdiv img, #myhopelessdiv table{
max-width:300px;
}
这肯定会起作用。