Question

在我的自定义文件管理器中我想显示截断的文件名。看到开头和结尾很重要，所以只有overflow:ellipsis才能完成这项工作。

显示文件名的图块可以更改其宽度（在引导列内）。它们用把手渲染，所以我可以在它被渲染之前操纵它（作为帮助者）。在那之后，我不想再使用javascript（例如监听调整大小的eventlisteners）

我的想法：在渲染图块时拆分文件名（正则表达式）的字符串。因此"long_filename_with_number_at_the_end_001.jpg"变为["long_filename_with_number_at_the_end_","001.jpg"]。

现在我希望将这些字符串包含在父div中的两个跨度中，而右边跨度则根据需要包含。并且剩下的跨度填补了其余部分。左侧跨度将获得text-overflow:ellipsis属性。

我找到了answer，这离我很近。我改变了一点，但我没有达到我的预期。

＆＃13;

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

＆＃13;

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

＆＃13;

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/

Answer 2

基于Flex的解决方案：

＆＃13;

ListView

＆＃13;

android:id="@android:id/list"

＆＃13;

如何使用CSS全宽度放置2个跨度

2 个答案: