带省略号的动态大小文本

Question

我在一个固定大小的容器中有一个标题和描述文本，我希望它们在同一行上。

两者都有动态宽度。

我希望描述（通常更长）在溢出容器时显示为省略号。

这是我目前所拥有的：fiddle。

标记

<div>
    <span class="header">Some dynamic-width header</span>
    <span class="desc">Some dynamic-width description which - when long enough - should end with a ellipsis</span>
</div>

css

div
{
    width: 400px;
    max-width: 400px;
    height: 25px;
    line-height: 25px;
    border-bottom: 2px solid #952262;
    color: #111;
}
.header
{
    font-weight: bold;
    float:left;
}
.desc
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block; 
    width: 100%;
}

有什么想法吗？

Answer 1

刚刚想通了。

我在 .desc 类中需要 display:block

FIDDLE

css

div
{
    width: 400px;
    max-width: 400px;
    height: 25px;
    line-height: 25px;
    border-bottom: 2px solid #952262;
    color: #111;
}
.header
{
    font-weight: bold;
    float:left;
}
.desc
{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; 
}