html - CSS右侧溢出左侧

Question

我正在输出一个文件名列表，旁边有总观看次数(计数)。

我正在尝试让计数溢出文件名。

..所以文件/理货列表如下:

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

..我正在尝试获得以下结果:

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

HTML/CSS (html5/css3) 的结构如下:

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

除了'box'重复之外，我并不特别关注使用的元素，因此它需要是一个类。如果该结构不起作用或者您宁愿在您的示例中使用另一个选择器，请随意。该解决方案确实需要在符合联盟标准的浏览器中进行验证和工作(不担心 IE)。

我已经尝试过各种样式的各种内联和 block 级元素，包括:

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

虽然没有任何效果 - 有什么想法吗？

Answer 1

表格将使所有行的左侧长度相同。

您完全可以使用 flexbox 获得您想要的效果(并且为了获得更广泛的浏览器支持，请回退到表格解决方案)。这里的想法是价格是其文本的全宽，比如“500 美元”，其余空间由元素名称填充，具有三个规则 text-oveflow, overflow，以及你提到的 white-space。

代码笔: 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 {}