我正在尝试确定是否可以为支持的元素创建 css word-wrap:break-word
,但是当无法破坏时,它也会扩展以获取其子元素的宽度。
<html>
<style>
.outer {
background-color:red;
word-wrap:break-word;
}
</style>
<div class="outer">
User generated content:
<a href="http://www.google.com">http://anannoyinglylongurlthatcausesthepagetogrowtolongunlessIusewordwrapbreakwordasdfasfasdfasdfasdfasdfasdfsadfasdfadsf</a>
<table>
<tr>
<td>asdfasdfadsffdsasdfasdfsadfafsd</td>
<td>asdfasdfadsffdaasdfassdffaafasds</td>
</tr>
</table>
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png"/>
</div>
</html>
在上面的示例中,url 正常中断,但是如果窗口变得比表格更窄,表格和 img 会溢出红色的外部 div。
如果我将外部 div 设为 display:inline-block 或 display:table,红色外部 div 会正确扩展以包含内容,但如果窗口比 url 窄,则 url 不会中断。
我只需要它在WebKit(在Android上)中工作,如果可能的话,我正在尝试找到一个仅CSS(无Javascript)的解决方案。