html - 如何使用 CSS 将 2 个 span 以全宽并排放置

Question

在我的自定义文件管理器中，我想显示截断的文件名。看到开头和结尾很重要，所以仅 overflow:ellipsis 不起作用。

显示文件名的图 block 可以改变它们的宽度(在引导列内)。它们是用 Handlebars 渲染的，所以我可以在它被渲染之前操纵它(巫婆 helper )。之后，我不想再使用 javascript(例如监听调整大小的事件监听器)

我的想法:在渲染图 block 时拆分文件名字符串(正则表达式)。所以 "long_filename_with_number_at_the_end_001.jpg" 变成了 ["long_filename_with_number_at_the_end_","001.jpg"]。

现在我想将这些字符串包含在父 div 内的两个跨度中，而右侧的跨度根据需要尽可能大。左边的跨度填充其余部分。左侧跨度应获得 text-overflow:ellipsis 属性。

我找到了这个 answer ，它离我很近。我做了一点改动，但没有得到我期望的结果。

* {
    position: relaitve;
}
.outer {
    width: 110px;
    height: 22px;
    border: 1px solid #ccc;
}
#colA {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background:yellow;
}
#colB {
    float:right;
    background: pink;
}

<div class="outer">
    <div id="colA">long_filename_foo_bar</div>
    <div id="colB">001.jpg</div>
</div>

Answer 1

只需在您的 html 文档中切换 #colA 和 #colB。

<div class="outer">
    <div id="colB">001.jpg</div>
    <div id="colA">long_filename_foo_bar</div>
</div>

JSFiddle: http://jsfiddle.net/skeurentjes/0nam7L2q/