Question

我正在尝试获得类似于以下代码的内容：

<div class="window-width-container">
    <div class="head">head</div>
    <div class="tail">(tail)</div>

    <div class="head">head head head head head</div>
    <div class="tail">(tail)</div>

    <div class="head">head head head head head head head head head head head head head head head head head head head head head head head head </div>
    <div class="tail">(tail)</div>
</div>

输出：

+------------------------------------+
+head(tail)                          +
+head head head head head(tail)      +
+head head head head head he...(tail)+
+------------------------------------+

如果存在以下限制：

head div具有内联块行为（即宽度对内容的灵活性）
尾部div紧跟在
这两个div都适合一行，如果太大则会将头部椭圆化

如果我使用表而不是div，我几乎可以使行为正常工作，但是一旦我使用

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

获取省略号行为，而不是溢出并推送超过容器div的边界。

非常感谢任何帮助！

Answer 1

HTML

在头尾附近添加包装类

<div class="window-width-container">
    <div class="wrapper">
        <div class="head">head</div>
        <div class="tail">(tail)</div>
    </div>
    <div class="wrapper">
        <div class="head">head head head head head</div>
        <div class="tail">(tail)</div>
    </div>
    <div class="wrapper">
        <div class="head">head head head head head head head head head head head head head head head head head head head head head head head head</div>
        <div class="tail">(tail)</div>
    </div>
</div>

<强> CSS

.window-width-container {
    width: 100%
}
.wrapper {
    flex: 1;
}
.head, .tail {
    display: inline-block;
}
.head {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tail {
    min-width: 5%;
    overflow: hidden;
}

检查fiddle

CSS：内联div，其最小宽度位于另一个可变宽度Div之后

1 个答案: