Dynamic sized text with ellipsis

问题

I have a header and description text within a fixed-size container which I want on the same line.

Both have dynamic width.

I want the description (which is generally a lot longer) to appear with an ellipsis when it overflows the container.

This is what I have so far: fiddle.

markup

<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%;
}

Any ideas?

回答1:

Just figured it out.

I needed display:block on the .desc class

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; 
}

来源：https://stackoverflow.com/questions/18125327/dynamic-sized-text-with-ellipsis