CSS：具有最小宽度的内联 div，位于另一个可变宽度的 Div 之后答案

【问题标题】：CSS: Inline div with min-width that comes after another Div of variable widthCSS：具有最小宽度的内联 div，位于另一个可变宽度的 Div 之后
【发布时间】：2014-01-17 21:47:42
【问题描述】：

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

<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 具有 inline-block 行为（即宽度可根据内容灵活调整）
tail div 紧随其后
两个 div 排成一行，如果头部太大，头部会被椭圆化

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

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

为了获得省略号行为，它会溢出并超出容器 div 的边界。

任何帮助将不胜感激！

【问题讨论】：

max-width 在头部 div 上？
对不起，我说错了，容器 div 需要 100% 宽度，我不想使用 javascript 来计算窗口宽度
灵活的宽度和省略号是 css 中的一个大问题，并且通常不能按预期工作。但也许这会对你有所帮助：stackoverflow.com/questions/12649904/…
如果它适合你，请检查jsfiddle.net/CNkJ4/1
不幸的是，如果可能的话，我正在尝试使用全部 100%。我可以展示的最好的例子是：jsfiddle.net/yu62p 但是头部溢出到多行，我需要它来截断

标签： html css

【解决方案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

【讨论】：