css - 垂直对齐，水平宽度相互依赖

Question

似乎是一个简单、直接的例子，让我很适合。这是我正在拍摄的图像：

这是我的 HTML

<div class="container">
    <div class="caption">
        <div class="label">
            Products that matter
        </div>
        <div class="content">
            <p>Mauris leo diam, convallis at rhoncus at, pellentesque ut turpis. Nullam orci velit, dignissim a suscipit et, adipiscing vel magna. Mauris leo diam.</p>
        </div>
    </div>
</div>

和 CSS

.container {
    width: 1000px;
    margin-top: 50px;
}
.caption {
    background: rgba(255,255,255,.9);
    display: table;
    width: 100%;
    height: 66px;
}
.caption .label {
    display: table-cell;
    background: #94749c;
    color: #fff;
    font-size: 30px;
    line-height: 30px;
    font-weight: 400;
    width: auto;
    height: 66px;
    vertical-align: middle;
}
.caption .content {
    display: table-cell;
    width: auto;
    height: 66px;
    vertical-align: middle;
}

我认为在纯 CSS 中实现这一点的最佳方法是使用 display: table 和 display table-cell。这样我们就可以得到适当的垂直对齐。问题是宽度。我最终想要的是适合文本长度的紫色单元格，而次要单元格线会中断。

这是一个 JSFiddle 示例。

问题是，根据次要单元的长度，它会将主要单元推入并导致换行。此外，如果您缩短第二个单元格的长度，主单元格会变得太大。

在没有javascript的情况下，我想做的是让主单元格自动格式化其宽度而不换行，然后让辅助单元格根据需要填充空格和换行符。

想法？

Answer 1

好吧，似乎 white-space: nowrap 是关键。

那很简单。