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/