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完全获得您正在寻找的效果（并且对于更广泛的浏览器支持，可以回退到表格解决方案）。这里的想法是价格是其文本的全宽，比如＆＃34; $ 500＆＃34;，其余的空间由项目名称填充，项目名称有三个规则text-oveflow，您提及的overflow和white-space。

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

所以我使用了一个表，因为它有助于数据的对齐并且在语义上是正确的。不需要弄乱浮子。

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

以下是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

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

您的span是内联元素，而div是块级别。我不知道你为什么这样做，但是你应该把它们放在自己的div中，这样就不会溢出到另一个中。

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

虽然在我看来你也应该将数字转换成跨度。然后一切都是内联的。

CSS右侧溢出左侧

3 个答案: