Эллипсис с переполнением текста не работает с динамической шириной

надеюсь, что кто-то может помочь.

У меня есть 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/

Спасибо!

Ответ 1

В первом div было display: table;, что вызывало проблемы с многоточием. Если вы удалите это, то многоточие отлично работает.

Я не удалю вопрос, который может кому-то помочь

Проверьте, работает ли это: http://jsfiddle.net/vNRpw/6/

Ответ 2

Что-то вроде этого:

<!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%.