html - 一行 "row"包含 2 "columns"，其中之一是流体

Question

我想要一个包含 2 个“列”的单行“行”。第一个“列”应该是流畅的并切断溢出的文本。

下面的示例在 webkit 浏览器(Chromium、Safari)中运行良好，但在 Firefox 或 Opera 中运行不佳。

有谁知道适用于所有浏览器的解决方案吗？

http://jsfiddle.net/fluidblue/YV3s9/

HTML:

<div class="header">
    <div class="clickable">
        <div class="description">
            Some very very very very very very very very very very long description
        </div>
    </div>
    <div class="buttons">
        <a href="#">Link1</a>
        <a href="#">Link2</a>
    </div>
</div>
<div class="content">
    Text below
</div>

CSS:

*
{
    margin:0;
    padding:0;
}

.header
{
    background-color: gray;
    display: table;
    width: 100%;
}

.clickable
{
    background-color: green;
    display: table-cell;
    width: 100%;

    position: relative;

    cursor: pointer;
}

.description
{
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buttons
{
    background-color: red;
    display: table-cell;
    white-space: nowrap;
}

编辑:按照 web2008 的建议添加了 top, left

Answer 1

尝试删除 position: absolute given for description，否则如果需要，请设置 left 和 top 值。