18

誰かが助けてくれることを願っています。

私は3つのネストされたdivを持っています。親、子、子の子。

私が達成したいのは(動機は関係ありません)、その子は親の幅(パーセンテージ)に応じて相対的な幅を取得し、その幅に応じて子の子にはオーバーフロー省略記号が必要です。問題は、子供の幅に % を使用すると省略記号が機能せず、幅をピクセル単位で定義すると機能することです。

ここにHTMLがあります

<div class="a">
   <div class="b">
        <div class="c">
        Here should go some text long enough to ellipsis the overflow
        </div>
    </div>
</div>

これが機能しないCSSです

    .a {
        border:black 1px solid;
        float: left;
        width: 122px;
        display: table;
        line-height: 14px;
    }
    .b {
        width:100%;
        color: black;
        font-size: 14px;
        text-transform: uppercase;
        cursor: pointer;
    }
    .c {
        line-height: 11px;
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space:nowrap;
    }

ただし、b の幅を 122px に変更すると、完全に機能します (122px は 100% に等しいことに注意してください)。

ここで確認できます: http://jsfiddle.net/vNRpw/4/

ありがとう！

4

2 に答える 2

9

display: table;省略記号で問題を引き起こしていた最初の div にありました。 これを削除すると、省略記号は正常に機能します。

誰かを助けるかもしれない質問を削除しません

ここで動作することを確認してください：http://jsfiddle.net/vNRpw/6/

于 2013-05-08T01:57:53.870 に答える