如何使在線div元素縮小寬度時，父母縮小

這裏是一個的jsfiddle顯示我想要實現的行爲：如何使在線div元素縮小寬度時，父母縮小

<span>See JSFiddle For Code</span>

你看，我有多個DIV元素顯示在一行中。每個div顯示一些文本。由於父div的大小變窄，我想要顯示的最右邊的div縮小（顯示省略號）。請注意，當縮小小提琴框寬度或縮小瀏覽器時，只有最右邊的div會縮小，並顯示省略號。

jsfiddle使用flex佈局來做到這一點，但我需要一個不使用flex佈局或JavaScript的解決方案。

我已經嘗試搞亂每個div使用顯示：內聯塊和其他一些技術，但沒有運氣。

2016-05-04 steve

我想你想要那樣。查收demo

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

2016-05-04 05:24:53

不，那不是。你所做的是創建一個表格，表格中的所有div都在同時縮小和擴大。我正在尋找一種方法來始終縮小最右邊的div。看看我寫的JSFiddle，看看它的行爲。我需要在不使用柔性佈局的情況下做同樣的事情。 – steve

您的示例擴展並將所有div合併在一起。這與我的例子不一樣，它會契約最右邊的div。使用我的JSFiddle示例並調整瀏覽器的寬度並查看它總是如何縮小的最右邊的div。 – steve

我想通了，並更新了的jsfiddle來說明如何通過簡單地使用顯示器做到這一點：內聯。靈活的解決方案比需要的複雜得多。

2016-05-06 12:55:20 steve

回答