html - 如何使一个元素根据行的剩余宽度改变其宽度？

Question

引用 this .

html:

<div class="w">
    <span class="e e1">Tag</span>
    <span class="e e2">type</span>
    <span class="e e3">This is a long text, and I hope it can end with ellipsis if it's really too long</span>
    <span class="e e4">Jul 27 2014</span>
    <span class="e e5">Comment</span>
</div>

CSS:

.w {
    border: 1px solid red;
}

.e {
    vertical-align: middle;
    display: inline-block;
    border: 1px solid #333;
    white-space:nowrap;
}

.e3 {
    overflow: hidden;
    text-overflow: ellipsis;
}

我希望所有五个元素都可以显示在同一行。并且除 e3 之外的所有元素都将显示其所有内容。剩余的宽度将分配给 e3。如果宽度不足以显示e3中的所有内容，则在e3的末尾显示省略号。

我不希望将 width 属性硬编码为 e3 的线宽，其他元素的宽度可能会改变。

我该如何实现？

Answer 1

改变

将类为 'w' 的 div 的属性显示到 flex

.w {
 border: 1px solid red;
    display: flex;
}

要使 span 中的字符串(具有 .e3 类的字符串除外)可见，请为这些 span 设置最小宽度

喜欢Check code : by setting min-width

或者你可以使用@media Rule，让你的网站相应地响应不同的分辨率