Text inside div doesn't text-overflow: ellipsis

Question

I have an issue, that my text isn't truncated with elipses.

I have a tab control, which shows/hides frames. Here is one frame example, that shows some amounth of elements ( they don't have strict sizes - the frame does):

So the issue is that i don't see "..." where text doesn't fit in.

I have tried using table-layout:fixed; but it didn't help.

.frame{
    width:400px;
    height: 400px;
}

.frame_content{
    width:100%;
    height: 100%;
}

.outer{
    width:100%;
    height: 100%;
    display:table;
    table-layout:fixed;
}

.inner{
    display:table-cell;
    vertical-align: middle;
    table-layout:fixed;
}

.content{
    background:red;
    width:100%;
    height: 20px;
    overflow:hidden;
    text-overflow: ellipsis;
}

.one{
    background:yellow;
}
.two{
    background:aqua;
}
.three{
    background:gray;
}

<div class="frame">
    <div class="frame_content">
        <div class="outer one">
            <div class="inner">
                <div class="content">
                    Looooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeeext
                </div>
            </div>
        </div>
        <div class="outer two">
            <div class="inner">
                <div class="content">
                    Looooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeeext
                </div>
            </div>
        </div>
        <div class="outer three">
            <div class="inner">
                <div class="content">
                    Looooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeeext
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

you can tgry this one:

.frame{
    width:100%;
    height: 400px;
}

.frame_content{
    width:100%;
    height: 100%;
}

.outer{
    width:100%;
    height: 100%;
    display:table;
    table-layout:fixed;
}

.inner{
    display:table-cell;
    vertical-align: middle;
    table-layout:fixed;
}

.content{
    background:red;
    width:100%;
    height: 20px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.one{
    background:yellow;
}
.two{
    background:aqua;
}
.three{
    background:gray;
}

DEMO HERE

Answer 2

You forgot white-space: nowrap; on your .content:

.content {
    ...
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Snippet:

.frame{
    width:400px;
    height: 400px;
}

.frame_content{
    width:100%;
    height: 100%;
}

.outer{
    width:100%;
    height: 100%;
    display:table;
    table-layout:fixed;
}

.inner{
    display:table-cell;
    vertical-align: middle;
    table-layout:fixed;
}

.content{
    background:red;
    width:100%;
    height: 20px;
    overflow:hidden;
  white-space: nowrap;
    text-overflow: ellipsis;
}

.one{
    background:yellow;
}
.two{
    background:aqua;
}
.three{
    background:gray;
}

<div class="frame">
    <div class="frame_content">
        <div class="outer one">
            <div class="inner">
                <div class="content">
                    Looooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeeext
                </div>
            </div>
        </div>
        <div class="outer two">
            <div class="inner">
                <div class="content">
                    Looooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeeext
                </div>
            </div>
        </div>
        <div class="outer three">
            <div class="inner">
                <div class="content">
                    Looooooooooooooooooooooooooooooooooooooooong teeeeeeeeeeeeeeeeeeeeeeeeeeext
                </div>
            </div>
        </div>
    </div>
</div>