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

Question

请考虑我的问题，我想让一系列图像表现得像不间断的文本，

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

child div - 这应该像一个单词，固定宽度不能确定，但​​是有一个固定的高度作为图像高度，可以应用css。

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

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

|=======父元素========|
|一些带有空格的中断文本   |
|介于两者之间。 |
|___________________________|

这是一种无法避免的情况，它会迫使父级增加其固定宽度。

|==============父元素===========|
| |=============子 div ================| |
| |SomeUnbreakLongWordHavingNoSpaces| |
| |_______________________________ em>____| |
|_______________________________ em>______|

我希望我的图像之间没有空格的行为方式相同，但它的行为方式是这样的，

|=======父元素========|
| |=========子 div =========| |
| | |图片| |图片| |图片| |图片| | |
| | |图片| |图片| | |
| |_________________________| |
|_________________ __________|

图像和子 div 的高度是固定的，所以基本上任何额外的元素都应该水平向右推，但事实并非如此，请分享您对此问题的解决方案。

祝你有美好的一天！

Answer 1

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

Answer 2

检查mock-up word-wrap 样式属性将用于拆分单词/内容 将样式 word-wrap:break-word; 应用于子 div。