0

我想要一个包含 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 的建议添加顶部，左侧

4

3 回答 3

0

尝试删除 position: absolute 给定的描述，否则如果你想它然后设置 left 和 top 值。

于 2013-07-24T11:14:28.663 回答
0

尝试了另一种方法：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;
    }
}
于 2013-07-24T12:46:36.350 回答
0

找到在 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表格单元格时出现错误：Firefox 是否支持位置：表格元素上的相对位置？

于 2013-07-26T13:47:53.147 回答