当父缩小时，如何使内联div元素收缩宽度

Question

这是一个显示我想要实现的行为的jsfiddle：

JSFiddle That Uses Flex Layout

<span>See JSFiddle For Code</span>

Image Showing Rightmost Div Displaying Ellipsis

你看到我连续显示了多个div元素。每个div显示一些文本。由于父div的调整范围较窄，我希望最右边的当前显示的div缩小（显示省略号）。请注意，在缩小小提琴框架宽度或缩小浏览器时，只缩小最右边的div，显示省略号。

jsfiddle使用flex布局来执行此操作，但我需要一个不使用flex布局或JavaScript的解决方案。

我已经尝试过使用每个div使用显示：内联块和其他一些技术，但没有运气。

Answer 1

我想你想要那样。请检查demo

.parent
 {
  display: table;
 }
.child
 {
 display: table-cell;
 }

Answer 2

我想出来并更新了JSFiddle以显示如何通过简单地使用display：inline来完成它。灵活解决方案远比它需要的复杂得多。