div内的文本没有文本溢出：省略号

Question

我有一个问题，我的文字没有用elipses截断。

我有一个标签控件，显示/隐藏框架。这是一个框架示例，它显示了一些元素（它们没有严格的大小 - 框架确实如此）：

所以问题是我没有看到文字不适合的“......”。

我尝试过使用table-layout：fixed;但它没有帮助。

.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

您忘记了android:background="@drawable/grad_bg" 上的button.setBackgroundResource(R.drawable.grad_bg); ：

white-space: nowrap;

<强>段：

.content

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

Answer 2

你可以试试这个：

.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