Html CSS右侧溢出左侧

我正在输出一个文件名列表，旁边有总视图（tally）

我正试图使计数溢出文件名

…因此，使用文件/理货清单，如：

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>

---

不过没什么用-有什么想法吗？

简单的答案是你的

。盒子太小，无法容纳div，所以它会掉下来。一个解决办法是把它扩大，但你还有其他问题

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

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


125000人
...

虽然在我看来，你应该把带数字的div也变成一个span。然后所有内容都是内联的。
所以我使用了一个表，因为它有助于数据对齐，并且语义正确。没有必要弄乱花车

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

这是密码笔：

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>


ejs-2015-参与者名单
125,000
哈默顿镇图片
20
屠宰场公司夏季运行
100
表格将使所有行的左侧长度相同

使用flexbox，您完全可以获得想要的效果（要获得更广泛的浏览器支持，请使用表解决方案）。这里的想法是，价格是文本的全宽，比如说“$500”，剩余的空间由项目名称填充，它有三个规则，即您提到的
文本流动
，
溢出
，和
空白

代码笔：

HTML:

你知道，你可以使用表格来获取表格数据。@MikeRobinson-我没有想到，也不知道如何让td溢出左侧。。你能举个例子吗？好了，把你弄清楚；）谢谢你，先生，很抱歉假设。我的问题是任何元素都可以使用。宽度不是问题，没有什么是“下降”（它们左右浮动）。@user3925824它确实下降了，因为chrome和Firefox中的宽度我得到了与divs相同的效果-左侧根据宽度切碎，左侧根据不同的宽度溢出右侧（如果有意义的话）。是的！！那正是我要找的！我不知道如何描述它，我也从未听说过flex/flex grow。。。非常感谢。如果您想了解更多关于flexbox的信息，请查看比我的答案更好的答案。挖吧。
<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>

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

.row {
  display: flex;
}

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

.price {}