text-overflow ellipsis does not work with dynamic width

Question

hope someone can help.

I have 3 nested div. Parent, children and children's children.

What i want to accomplish (the motive is not relevant) is that that child gets a relative width depending on the parent's width (a percentage) and the children's children must have an overflow ellipsis depending on that width. The problem is that if i use a % in the children's width the ellipsis does not work and if i define the width in pixeles it work.

Here is the HTML

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

Here is the nonworking 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;
    }

However if i change b's width for 122px it works perfect (note that 122px should equal 100%).

You can check it here: http://jsfiddle.net/vNRpw/4/

Thanks!

unnecessary downvote. If I updated the answer everyone would know it was solved so no one would waste time on it. That will give me time for answering the question. Additionally, i cant mark my own answer as accepted after two days. Anyways, thanks for the suggestions — Dan Stern, May 08 '13 at 01:59

Dan Stern · Accepted Answer · 2013-05-08T02:03:22.647

9

Had display: table; in first div which was causing troubles with the ellipsis. If you delete this then the ellipsis works fine.

I wont delete the question it may help someone

Check it working here: http://jsfiddle.net/vNRpw/6/

edited May 08 '13 at 02:03

answered May 08 '13 at 01:57

Dan Stern

2,155
8
26
38

this rule caused a ton of trouble with ellipsis in my code. At first it looks like the ellipsis works, until I resized the DIV. Taking display:table out worked perfectly. Thanks! – Bildonia Apr 28 '14 at 21:38
Mine displays in one line without going to the next line of the DIV http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts – SearchForKnowledge Oct 13 '14 at 15:47
I add ellipsis in side Bootstrap's `input-group` which has `display:table`. Besides remove `display:table`, any other way to resolve this? *Update*: it turns to another question: http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell – Junle Li Jan 26 '15 at 06:08
had the same problem with display:inline-table. changed to inline block and fixed it. – Mihai Popescu Mar 26 '15 at 16:39

score 7 · Answer 2 · answered May 08 '13 at 01:53

What about something like this:

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

The main change was to put a width slightly less than 100% on .c.

Mine stays in one line and shows the ellipses. http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts — SearchForKnowledge, Oct 13 '14 at 15:46

text-overflow ellipsis does not work with dynamic width

2 Answers2