div没有固定宽度以绕过具有固定宽度的父级

Question

请考虑我的问题，我想制作一系列图像，就像非破坏文字一样，

父元素 - 它可能是任何元素，它可能有也可能没有固定的宽度，所以基本上我不能对它应用任何css。在大多数情况下，它是一个“td”标签。

子div - 这应该像一个单词，固定宽度无法确定，但具有固定高度作为图像高度，可以应用css。

图片 - 这应该像单词中的字符一样，具有固定的宽度和宽度。与儿童div相同的固定高度。

这是html元素的正常Box模型行为，其中文本在具有固定宽度的元素内。

| =======父元素======== |
|一些用空格打破文本|
|之间。 |
|的 _ __ _ __ _ __ _ __ _ __ < EM> _ __ _ __ _ __ _ __ |

这是一个无法避免的条件，迫使父母增加其固定宽度。

| ==============父元素=========== |
| | =============儿童div =============== | |
| | SomeUnbreakingLongWordHavingNoSpaces | |
| |的 _ __ _ __ _ __ _ __ _ __ < EM> _ __ _ __ _ __ _ __ _ __ _ __ _ _ | |
|的 _ __ _ __ _ __ _ __ _ __ < EM> _ __ _ __ _ __ _ __ _ __ _ __ _ ___ |

我希望我的图像之间没有任何空格，表现方式相同，但它的行为类似于此，

| =======父元素======== |
| | =========儿童div ========= | |
| | |图片| |图片| |图片| |图片| | |
| | |图片| |图片| | |
| |的 _ __ _ __ _ __ _ __ _ __ < EM> _ __ _ __ _ ___ | |
|的 的 __ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ ___ |

图像和子div具有固定的高度，因此基本上任何额外的元素都应该水平向右推，但它没有，请分享您关于此问题的解决方案。

度过美好的一天！

Answer 1

不确定是否有效，但请尝试将width: 100%; overflow-x: auto;添加到child-div，并float: left;添加到图片。

Answer 2

检查mock-up 自动换行样式属性将用于打破单词/内容 将样式word-wrap:break-word;应用于子div。