web-dev-qa-db-ja.com

テキストオーバーフロー省略記号は動的幅では機能しません

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

私は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/

ありがとう！

cssnestedoverflowellipsis
18
Dan Stern

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

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

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

9
Dan Stern

このようなものはどうですか？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

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

</style>

</head>
<body>

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

</body>
</html>

主な変更点は、.cの幅を100％よりわずかに小さくすることでした。

7
ralph.m