当父div随机调整大小时，文本溢出不起作用？

Question

我有一堵图像墙，尺寸有些随意收缩，最适合DOM宽度。

这些图像存储在div容器中，以及将鼠标悬停在图像上时显示图像名称的文本。

现在图像墙本身工作正常，但是，我有一个小的样式问题。

当图像很小并且文本溢出文本范围时，text-overflow: ellipsis;什么都不做。实际上，如果不是具有overflow:hidden;的容器，则文本将继续运行。

为了演示，尽管容器的宽度没有增加，但我在文本范围内放置border: 1px solid red;以向您显示文本确实溢出。

为什么会这样？

Answer 1

尝试添加white-space：nowrap和overflow：隐藏到类中。

Answer 2

  

当图像很小并且文本溢出文本范围时，文本溢出：省略号;什么也没做。事实上，如果不是容器溢出，文本会继续前进：隐藏; ...为什么会发生这种情况？

实际上，文本溢出属性显示溢出容器中可见的文本，其中文本的部分或部分被父容器隐藏。必须由父容器设置overflow:hidden属性。

为了支持这一点，MDN对此有何评论

  

文本溢出CSS属性确定溢出内容的方式   向用户发出未显示 ....此CSS属性不会强制发生溢出;要执行此操作并使文本溢出应用，作者必须在元素上应用一些其他属性，例如将溢出设置为隐藏。

该链接取自MDN