水平寬度垂直對齊取決於彼此

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。這樣我們可以得到適當的垂直對齊。問題是寬度。我最終想要的是紫色的細胞適合文本的長度，而次要細胞系斷裂。

Here's a JSFiddle example.

的問題是，取決於中的小細胞的長度，它會推在主小區中，並導致換行。另外，如果縮短第二個單元的長度，則主單元變得太大。

我想做的事情，沒有JavaScript，有主單元格自動格式的寬度沒有斷行，然後有輔助單元格根據需要填充空格和換行符。

想法？

Answer 1

好吧，白色空間：nowrap似乎是關鍵。

很簡單。