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

我尝试了各种样式的内联和块级元素，包括：

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

Answer 2

所以我为此使用了一个表格，因为它有助于对齐数据并且在语义上是正确的。无需弄乱花车。

真正的诀窍在于 CSS。设置最大宽度，省略号的文本溢出，并且不允许分词。实际的省略号技巧不需要在表格中 - 任何块级元素都可以处理它。

这是代码笔：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

简单的答案是您的.box 太小而无法包含 div，因此它会下降。一种解决方案是使其更宽，但您还有其他问题。

你的 span 是一个内联元素，而 div 是块级的。我不知道你为什么这样做，但你可能应该将这两个包含在他们自己的 div 中，这样一个就不会溢出到另一个。

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

虽然在我看来你应该把带有数字的 div 也变成一个跨度。然后一切都是内联的。