Question

Please see this fiddle for my situation. Essentially, I have a floating span which is obstructive when the window is made small (it goes on another line).

When the window is small, I want the floating span to shrink with the text that doesn’t fit hidden (some sort of overflow: hidden, I guess). Essentially, I want to give priority to the text on the left, and have the floating span gradually go away as the window is made small.

Answer 1

See: http://jsfiddle.net/thirtydot/XMX9y/

CSS:

.row {
    border: 1px dashed #444;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: right;
}
/* first span */
.row span:first-child {
    float: left;
    margin-right: 20px;
}
/* second span */
.row span + span {
    background: #ddd;
}

HTML:

<div class="row">
    <span>left left left left left left</span>
    <span>What is the best way to</span>
</div>