已修復表格佈局上的自動單元格寬度，但最後一個單元格

Question

我想爲網站創建麪包屑。

元素應該展開以填充所有可用空間。如果他們不能適應它，我想他們的內部文本夾着text-overflow: ellipsis，除了最後一個。

換句話說：擁有全寬的最後一個元素，並在剩餘空間上分配其他元素（寬度取決於它們的內容，或者如果不可能，至少它們不應該看起來不好...） 。

我試過這段代碼。

<div> 
    <ul> 
     <li>paka</li> 
     <li>ultrapaka</li> 
     <li>ultrapaka</li> 
     <li>ultrapaka ultrapaka</li> 
     <li>daslidjsajdsa</li> 
    </ul> 
</div> 

這裏的CSS：

div { 
    display: table; 
    margin: 5px; 
    border:1px solid #777; 
    padding: 3px; 
    table-layout:fixed; 
} 

ul { 
    display: table-row; 
} 

li { 
    display: table-cell; 
    padding: 5px; 
    border: 1px solid #000; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
} 

如果我把table-layout: fixed表確實限制它的空間，但我失去了自動的單元格寬度。

如果我不這樣說，表格只會超出其極限。

你可以找到一個JsFiddle here。 （我已將表格寬度設置爲400px以顯示所需的效果，即使在最終解決方案時它應該以100％展開）。

Answer 1

最好的辦法是使用flexbox屬性，但很難使其適用於所有瀏覽器。

您可以給所有單元格固定寬度或百分比，並使用:last-child選擇器在最後一個單元格上應用自動寬度。

您也可以嘗試box-sizing，但我不確定結果。