Question

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

以下示例完全适用于webkit浏览器（Chromium，Safari），但不适用于Firefox或Opera。

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

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的建议添加了顶部，左侧

Answer 1

尝试删除位置：绝对给定描述，否则如果需要，则设置左值和顶值。

Answer 2

尝试了另一种方法：flex-box。这适用于Firefox，Chromium，Safari，但不适用于Opera（溢出：隐藏被忽略..）

http://jsfiddle.net/JH5fQ/

HTML：

<div class="flex-container flex-container-style">
    <div class="flex-item">
        Text Text Text Text Text Text Text Text Text Text Text Text Text
    </div>
    <div class="flex-item">
        Button Button
    </div>
</div>

CSS：

.flex-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;

    -webkit-box-align: start;
    -moz-box-align: start;

    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-item
{
    white-space: nowrap;

}

.flex-item:nth-child(1)
{
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: red;

    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;

    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;

    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.flex-item:nth-child(2)
{
    background-color: green;

    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;

    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;

    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

/* Legacy Firefox implementation treats all flex containers as inline-block elements. */
@-moz-document url-prefix()
{
    .flex-container
    {
        width: 100%;
        -moz-box-sizing: border-box;
    }
}

Answer 3

找到了在Firefox，Chromium，Safari和Opera（未经测试的IE）中使用的解决方案：

http://jsfiddle.net/zKtU3/

HTML：

<div class="header">
    <div class="clickable">
        <div class="posrel">
            <div class="description">
                Some very very very very very very very very very very long description
            </div>
        </div>
    </div>
    <div class="buttons">
        <div>Button1</div><div>Button2</div>
    </div>
</div>
<div>
    Text below
</div>

CSS：

.header
{
    display: table;
    width: 100%;
    height: 50px;
}

.clickable
{
    display: table-cell;
    width: 100%;
}

.posrel
{
    position: relative;

    /* Vertically centering the text */
    line-height: 50px;
}

.description
{
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    /* Cut text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buttons
{
    display: table-cell;
    vertical-align: middle;

    /* Prevent wrapping of multiple buttons */
    white-space: nowrap;
}

.buttons div
{
    display: inline-block;
}

需要使用类posrel的附加div，因为firefox在表格单元格上设置position: relative时遇到了错误：Does Firefox support position: relative on table elements?

单行“行”包含2个“列”，其中一个是流动的

3 个答案: