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 の例を次に示します。

問題は、マイナー セルの長さによっては、プライマリ セルが押し込まれ、改行が発生することです。また、2 番目のセルの長さを短くすると、1 次セルが大きくなりすぎます。

私がやりたいのは、JavaScript を使用せずに、プライマリ セルの幅を改行せずに自動フォーマットし、必要に応じてセカンダリ セルにスペースと改行を埋めることです。

考え？

Answer 1

どうやら white-space: nowrap が鍵のようです。

それは簡単でした。