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

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

html css

Html 如何在div中控制第三方内容,html,css,Html,Css,我遇到了以下情况： <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: <

我遇到了以下情况：

<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>


这是一个示例图像：
这是表中的一个示例：
你好世界
在div中还有一些示例：
带着一些邪恶的内容：
一些信息…

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

以及其他一些信息…

问题是“MyHoplesDiv”中的所有内容都是我无法更改的外部内容，但我希望它遵循我需要的规则，即内容适合我设置的某个宽度（在本例中为300px）。我是否可以在“MyHoplesDiv”上应用任何样式组合，使子元素能够执行

换行：打断word

，使图像适合于div内部，或者至少不让它们显示在div外部

我对div里面的内容没有影响，我可以用蹩脚的html来计算，只是想对它显示的区域有一些控制…

只要它不在iframe中，你就可以在

\mydiv

下应用样式

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

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

即使你的#我的无望div中有填充、边距等，它也会坚持你设定的尺寸

您还可以

溢出：隐藏

隐藏div中溢出的内容

您可能需要更改

wordbreak:break-word到断字：全部断字
编辑
当我查看您的代码时，这里有一个快速的解决方案。从一开始就应该这样做
#myhopelessdiv > div, #myhopelessdiv img, #myhopelessdiv table {
    width:100%;
} 

你至少应该知道你会得到什么样的内容，可能是它们的ID或类
注意：如果您不知道将获得什么样的数据/内容，并且它们的容器不一致，那么这可能不是一个好的解决方案
另外，关于溢出：隐藏您可以执行溢出：自动，这样您就有了这个滚动功能。
使用这个css
#myhopelessdiv img, #myhopelessdiv table{
max-width:300px;
}

这肯定有效。
为什么不使用：
#myhopelessdiv {
  overflow: hidden;
}

因此，如果内容比你的div大，它就会被切掉。
我喜欢这里的myhopessdiv
。然而，当我的内容在某个地方有相反的风格时：wordwrap:normal
它看起来仍然不正确。div的内容在外面仍然可见。。。我遗漏了什么吗？@Martin顺便说一句，这是什么样的外部内容？整个网页？或者XML、JSON或AJAX（html格式）响应？好的，overflow:hidden至少会将混乱隐藏起来……）这是一个好的开始。。。我不能设置高度，因为它可以是半个屏幕长或5个屏幕，但这并不是一个真正的问题，宽度是我需要设置的，它是这样做的…它是一个完整的网页，它是一个html样式的文档，可以来自不同的来源。。。我对它是如何产生的没有影响。。。重要的是要控制它……我建议溢出：自动；——查看我的更新。你试过运行我的示例吗？div的大小正好是300px，但是内容更大，并且在div之外重叠。。。使用“最大宽度”（max width）时，也会发生相同的情况…应用它后，内部元素仍然大于div。。。如果我把一些矛盾的风格放进去，它会再次破裂。。。
#myhopelessdiv {
  overflow: hidden;
}