CSS：如何具有可變列大小與文本溢出省略號

Question

這是開始我發瘋，任何幫助表示讚賞！

我希望每個<li>不是「固定」的最大寬度爲150px，最小寬度爲10px，但是當瀏覽器調整大小時，它們應該縮小以固定（並且寬度相等）。我還希望每個非「固定」<li>中的文本都具有文本溢出：省略號。

我似乎無法得到這個工作，所以到目前爲止，我有：

http://jsfiddle.net/546t8/

HTML：

<ul> 
    <li class="fixed">Fixed Size</li> 
    <li> 
     <div> 
      <span>this text is very very long and it goes on and on and on and on but does not wrap</span> 
     </div> 
    </li> 
    <li> 
     <div> 
      <span>short</span> 
     </div> 
    </li> 
    <li> 
     <div> 
      <span>one more tab</span> 
     </div> 
    </li> 
    <li> 
     <div> 
      <span>another tab</span> 
     </div> 
    </li> 
</ul> 

CSS：

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: table; 
    border-spacing: 6px 0px; 
} 

li { 
    display: table-cell; 
    background-color: red; 
    width: 150px; 

} 

li > div { 
    overflow: hidden; 
    text-overflow: ellipsis; 

} 

li > div > span { 
    display: block; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

li.fixed { 
    width: 100px; 
    min-width: 100px; 
    text-align: center; 
} 

更新：這顯示了我在列後的內容秒，但正如你所看到的文本沒有隱藏的省略號：

http://jsfiddle.net/546t8/9/

UPDATE：這是越來越近了，但仍然沒有省略號:-(

http://jsfiddle.net/546t8/11/

更新：已解決解決方案發布如下。

http://jsfiddle.net/AjZDx/2/

Answer 1

終於得到這個工作...是（是不需要HTML變化）解決方案：

http://jsfiddle.net/AjZDx/2/

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    display: table; 
    border-spacing: 6px 0px; 
} 

li { 
    display: table-cell; 
    background-color: red; 
    min-width: 20px; 
    width: 120px; 
} 

li.fixed { 
    width: 100px; 
    min-width: 100px; 
    text-align: center; 
} 

ul > li > div { 
    display: table; 
    border-spacing: 0px 0px; 
    table-layout: fixed; 
    width: 100%; 
} 

ul > li > div > span { 
    display: table-cell; 
    white-space: nowrap; 
    overflow-x: hidden; 
    text-overflow: ellipsis; 
} 

Answer 2

我相信顯示：表並顯示：表細胞都是死路一條：表格的佈局將始終使用所必需的最大單元格高度以顯示所有內容（見下文） - 但你需要的對面。另一方面，桌面佈局適合以您描述的方式使用水平空間。

完全不同的方法是使用一些JavaScript庫做布點給你。那裏有很多。一些示例：

• http://masonry.desandro.com/ 「pintrest像」 塊
• http://www.datatables.net/的佈局 「數據表」 佈局
• http://layout.jquery-dev.net/demos/table_fixed_header.html總體佈局
• 和許多

P.S.

使用float和簡單的HTML你得到的高度，但不是你的寬度要：

<ul> 
    <li class="fixed">Fixed Size</li> 
    <li class="ellipsis">this text is very very long and it goes on and on and 
on and on but does not wrap</li> 
    <li>short</li> 
    <li>one more tab</li> 
    <li>another tab</li> 
</ul> 

和CSS

li { 
    float:left; 
    min-width: 10px; 
} 

li.ellipsis { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    max-width: 200px; 
} 

li.fixed { 
    width: 150px; 
} 

看到這個搗鼓工作示例： http://jsfiddle.net/bjelline/TxDfc/