Я пытаюсь определить, можно ли создать css для элемента, который поддерживает word-wrap:break-word
, но также расширяется, чтобы взять ширину своих дочерних элементов, когда разрыв невозможен.
<html>
<style>
.outer {
background-color:red;
word-wrap:break-word;
}
</style>
<div class="outer">
User generated content:
<a href="#" onclick="location.href='http://www.google.com'; return false;">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-дисплей: inline-block или display: table, красный внешний div правильно расширяется, чтобы включать содержимое, но URL-адрес не прерывается, если окно уже, чем URL-адрес.
Мне нужно только это, чтобы работать в WebKit (на Android), и я пытаюсь найти только CSS (без Javascript), если это возможно.