CSS Right Side Overflows Left Side

Question

I'm outputting a list of file names with total views (tally) beside them.

I'm trying to get the tally to overflow the file name.

..So with a file / tally list like:

ejs-2015-participants-list 125,000
koh-hammertown-pics 20
slaughterhouse-co-summer-run 100

..I'm trying to get the result of:

ejs-2015-participan...125,000
koh-hammertown-pics        20
slaughterhouse-co-summe...100

The HTML / CSS (html5 / css3) has a structure like:

<style>
 .box {width:200px;}
 .box span {float:left;}
 .box div {float:right;}
</style>
<div class="box">
 <span>ejs-2015-participants-list</span><div>125,000</div>
 <span>koh-hammertown-pics</span><div>20</div>
 <span>slaughterhouse-co-summer-run</span><div>100</div>
</div>

I'm not particular about the elements used other than 'box' is repeated so it needs to be a class. If the structure won't work or you'd rather use another selector in your example, feel free. The solution does need to validate and work in consortium compliant browsers (not worried about IE).

I've tried various inline and block level elements with various style including:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Nothings working though - any ideas?

Answer 1

Tables would make the left side the same length for all rows.

You can totally get the effect you're looking for using flexbox (and for broader browser support fall back to a table solution). The idea here is that the price is the full width of its text, say "$500", and the rest of the space is filled by the item name, which has the three rules text-oveflow , overflow , and white-space that you mentioned.

Codepen: http://codepen.io/tholex/pen/wKQPEV

HTML:

<div class="item">
  <div class="name">Delicious Bagels</div>
  <div class="price">$500</div>
</div>

CSS:

.row {
  display: flex;
}

.name {
  flex-grow: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.price {}

Answer 2

So I used a table for this, since it helps with alignment of the data and is semantically correct. No need to mess with floats.

The trick is really in the CSS. Set a max width, text-overflow of ellipsis, and don't allow word break. The actual ellipsis trick doesn't need to be in a table - any block level element can handle it.

Here's the codepen: http://codepen.io/anon/pen/bVQYWJ

CSS

.table td {
    text-align: right;
}

.table th {
    text-align: left;

}

.table th {
    display: inline-block;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML

<table class="table">
    <tr>
        <th>ejs-2015-participants-list</th>
        <td>125,000</td>
    </tr>

    <tr>
        <th>koh-hammertown-pics</th>
        <td>20</td>
    </tr>

    <tr>
        <th>slaughterhouse-co-summer-run</th>
        <td>100</td>
    </tr>
</table>

Answer 3

The simple answer is your .box is too small to contain the div so it drops down. One solution is to make it wider but you have other problems.

Your span is an inline element while the div is block level. I don't know why you do it that way but you should probably contain those two inside their own div so one doesn't overflow into the other.

<div class="box">
    <div>
        <span> stuff </span><div>125,000</div>
    </div>
    ...

Though it seems to me you should turn the div with the number into a span also. Then everything is inline.