使用空格的动态表：nowrap

【问题标题】：Dynamic Table using white-space: nowrap使用空格的动态表：nowrap
【发布时间】：2013-11-21 15:58:09
【问题描述】：

我想建立一个具有两列（和一行）和特定宽度的表格。左边的单元格将包含一个应该是单行和自动省略号的文本。右侧单元格应具有动态内容，该内容会自动增加右侧单元格的宽度，从而缩小左侧单元格的宽度。

display: table/table-cell 的 div/css 解决方案很糟糕，因为它使两个单元格都宽了 50%。

div fiddle

raw-table/css 解决方案也很糟糕，因为white-space: nowrap（text-overflow 需要）破坏了表格的自动布局机制，甚至将其扩大到原来的宽度。

table fiddle

有人能解开这个神秘的谜团吗？ BR, 丹尼尔

【问题讨论】：

标签： html css

【解决方案1】：

据我所知this is the closest you'll get，不幸的是，您列出的要求无法解决 - 您需要在至少一个容器上设置宽度，或者使用一些 JS 以便停止扩展是他们所知道的。

HTML：

<div>
   <span>Something quite long that should exceed the table cell.</span> 
   <span>here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.</span>
</div>

CSS：

div{
    margin:0;
    padding:0;
    display:table;
    table-layout: fixed;
    width:100%;
    max-width:100%;
}
span{
    padding 0 20;
    margin:0;
    display:table-cell;
    border:1px solid grey;
}
span:first-child{
     white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;    
}
span:last-child{
    width:auto;
}

【讨论】：

这是我的预期，因为我已经检查了很多替代方案。我只是希望 css 专业人士有一些魔力;-)。还是谢谢。