0

2 つの「列」を含む 1 行の「行」が必要です。最初の「列」は流動的で、はみ出すテキストをカットする必要があります。

以下の例は、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 を削除してみてください。説明に指定されているか、必要な場合は左と上の値を設定してください。

于 2013-07-24T11:14:28.663 に答える
0

別のアプローチを試しました：フレックスボックス。これは Firefox、Chromium、Safari では機能しますが、Opera では機能しません (overflow: hidden は無視されます..)

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 に答える