0

互いにいくつかの div を含む HTML ページがあります。

div#given                -- display: block
    div#one              -- display: table
        div#two          -- display: table-row
            div#three    -- display: block
                div#four -- display: block

#givenサードパーティによって提供され、明示的なwidthセットがありますが、その幅は JavaScript を介して変更できます。

#one、#two、#threeおよび#fourすべてに暗黙的な幅があります。

#three次のようなスタイルシートがあります。

#three
{
    overflow-y: hidden;
}
#three:hover
{
    overflow-y: visible;
}

#fourには多くのテキストが含まれており、完全にオーバーフローしていますが、オーバーフローはホバリング#threeされるまで隠されています。 を適用したいのですが、が設定されている場合にのみ機能するようです。ただし、それは両方と数千ピクセルを左に伸ばします。これは、私が望むものではありません。 これまでのところ、 の幅を明示的に設定する他の解決策は見つかりませんでした。これは (可能ですが、非常に) の幅が固定されていないため、非常に非現実的です。#three
#fourtext-overflow: ellipsis;white-space: nowrap;#three#four
#four#given

これを行うJS以外の方法はありますか？

ここに私の問題があります: https://jsfiddle.net/zquL7sem/3/

#three私の目標は、またはの明示的な幅を設定せずに、赤い境界線の内側の領域を青い線で終了させ、テキストが終了する場所に 3 つのドットを表示すること#fourです。

どんな助けでも大歓迎です。

4

1 に答える 1

1

プロパティ要素を使用するdisplay:tableと、実際のテーブルのようにコンテンツが必要とするだけ拡張されます。table-layout:fixedこれは :とで修正できますwidth。 https://jsfiddle.net/zquL7sem/4/

于 2015-03-18T14:15:55.360 に答える