3

これは私を夢中にさせ始めています。

「固定」されていないそれぞれ<li>の最大幅を 150px、最小幅を 10px にしたいのですが、ブラウザのサイズを小さくすると、縮小して修正する必要があります (幅が等しくなります)。 . <li>また、各非「固定」内のテキストに text-overflow: ellipsis を付けたいと思います。

私はこれを機能させることができないようです。これまでのところ、私は持っています:

http://jsfiddle.net/546t8/

HTML:

<ul>
    <li class="fixed">Fixed Size</li>
    <li>
        <div>
            <span>this text is very very long and it goes on and on and on and on but does not wrap</span>
        </div>
    </li>
    <li>
        <div>
            <span>short</span>
        </div>
    </li>
    <li>
        <div>
            <span>one more tab</span>
        </div>
    </li>
    <li>
        <div>
            <span>another tab</span>
        </div>
    </li>
</ul>

CSS:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    width: 150px;

}

li > div {
     overflow: hidden;
    text-overflow: ellipsis;

}

li > div > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

更新:これは、列で何を求めているかを示していますが、ご覧のとおり、テキストは省略記号で隠されていません:

http://jsfiddle.net/546t8/9/

更新:これは近づいていますが、まだ省略記号はありません:-(

http://jsfiddle.net/546t8/11/

更新:以下に投稿された解決済みの解決策。

http://jsfiddle.net/AjZDx/2/

4

2 に答える 2

3

最後にこれを機能させました...解決策は（htmlの変更は必要ありませんでした）：

http://jsfiddle.net/AjZDx/2/

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    min-width: 20px;
    width: 120px;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

ul > li > div {
    display: table;
    border-spacing: 0px 0px;
    table-layout: fixed;
    width: 100%;
}

ul > li > div > span {
    display: table-cell;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}
于 2013-05-05T21:39:37.847 に答える
0

display: table と display: table-cell は行き止まりだと思います: テーブル レイアウトは常に、すべてのコンテンツを表示するために必要な最大セルの高さを使用します (以下を参照) - しかし、反対のものが必要です。一方、テーブルレイアウトは、あなたが説明した方法で水平スペースを使用するのに適しています.

まったく異なるアプローチは、JavaScript ライブラリを使用してレイアウトを行うことです。それらのトンがあります。いくつかの例:

ps

float とより単純な html を使用すると、高さは得られますが、必要な幅は得られません。

<ul>
    <li class="fixed">Fixed Size</li>
    <li class="ellipsis">this text is very very long and it goes on and on and
on and on but does not wrap</li>
    <li>short</li>
    <li>one more tab</li>
    <li>another tab</li>
</ul>

とcss

li {
    float:left;
    min-width: 10px;
}

li.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

li.fixed {
    width: 150px;
}

実際の例については、このフィドルを参照してください: http://jsfiddle.net/bjelline/TxDfc/

于 2013-05-05T14:23:45.013 に答える