CSS：省略号和正确的附加组件，应该始终可见

我在一行中有3个对象-

文本

，

图标

和

日期

首先是

文本

，然后是

图标

（粘贴在

文本

的末尾）。并且

日期

卡在行的右侧

当

文本

太长时，我希望它用省略号缩短，但

图标

应始终保持可见（而不是用

文本

缩短）

使用下面的代码，我使它几乎正常工作，但图标仍停留在右侧

但我需要将其粘贴到

文本中。请参阅下面的代码或

HTML:

更新：所有字段的宽度可能不同。
这似乎适用于我的Chrome和Opera Presto；Firefox在某些情况下可以工作，但在其他情况下存在严重的问题，这使得它不实用。再加上它的结构可能太复杂了

无论如何，我都会把它贴在这里，以防它能激励别人：）

（根据OP的要求，我在最后添加了一个涉及JS的解决方案，在Firefox中也可以使用）

解决方案：

HTML:

基本上，这是一个递归使用“一件事向右浮动，然后另一件事占用剩余空间”，再加上一个
。最终包装器
，这样图标可以左对齐

Firefox中的问题：
由于
.final wrapper
是
显示：内联块
，而
图标
是
浮动
，Firefox将只计算足够长的宽度来容纳
.text
（除非
.icon
更长），因此：

如果
.text
的长度可以容纳
.icon
，
.icon
将保持不变，并且省略号将显示，即使看起来有足够的空间

如果
.icon
比
.text
长，
.icon
将占据整个位置，
.text
将被推到下一行，溢出的包装（并且
溢出：隐藏
将不起作用，除非您明确指定
高度
）


JS解决方案：
结合上述结构，添加一小段JS可以使解决方案对Firefox友好：

document.addEventListener("DOMContentLoaded",function(){
    var texts=document.querySelectorAll(".final-wrapper > .icon + .text");
    [].forEach.call(texts,function(text){
        var icon=text.previousSibling;
        while(!icon.classList || !icon.classList.contains("icon")){
            icon=icon.previousSibling;
        }
        var box=icon.getBoundingClientRect();
        text.style.marginRight=(box.width+5)+"px";
    });
});


它基于这样一个假设，即
.icon
在渲染后将处于固定宽度。
我看到您的
。包装器
是固定宽度的。你能对你的
.date
和
.icon
？to.icon-是，to.date-否如果这仍然很重要，我记得在真实的应用程序中，即使是.icon的宽度也不是静态的。可以有多个图标。谢谢，这正是我想要的，除了Firefox的问题。@Bandolero如果你的
。图标
是固定宽度的，这仍然是可能的。如果最后期限临近，我会选择JS解决方案。“图标”可以是两种类型——字体图标和标签[new]。因此，从技术上讲，每一行的宽度都是固定的，但是对于每一行来说，可以没有一行（最小值），也可以有两个图标和一个标签（最大值）。你能给我一个JS解决方案的方向吗？也许在单独的答案中？@Bandolero它实际上并不复杂：但你必须确保
.text
有足够的空间至少显示第一个字符和省略号。非常感谢！我“接受”了您的答案，请将此解决方案添加到答案中，以便其他人可以更轻松地找到它。
.wrapper {
    width: 200px;
}

.text, .date, .icon {
    padding-right: 5px;
}

.text {
    text-align:left;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.date {
    float: right;
}

.icon {
    float: right;
}

<div class="wrapper">
    <div class="date">right</div>
    <div class="sub-wrapper">
        <div class="final-wrapper">
            <div class="icon">[icon]</div>
            <div class="text">text</div>
        </div>
    </div>
</div>

div.wrapper {
    width:200px;
}
div.date, div.icon, div.text {
    padding-right:5px;
}
div.date, div.icon {
    float:right;
}
div.sub-wrapper, div.final-wrapper, div.text {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
div.sub-wrapper {
    text-align:left;
}
div.final-wrapper {
    display:inline-block;
    max-width:100%;
}

document.addEventListener("DOMContentLoaded",function(){
    var texts=document.querySelectorAll(".final-wrapper > .icon + .text");
    [].forEach.call(texts,function(text){
        var icon=text.previousSibling;
        while(!icon.classList || !icon.classList.contains("icon")){
            icon=icon.previousSibling;
        }
        var box=icon.getBoundingClientRect();
        text.style.marginRight=(box.width+5)+"px";
    });
});