固定寬度行，dynamicaly大小的列，用破字包裝

Question

我有這樣一個系列的標籤和值的行：

<div class="row"> 
    <div class="rowName">thing 1</div> 
    <div class="rowValue">325,000</div> 
</div> 
<div class="row"> 
    <div class="rowName">thing 2 that is longer</div> 
    <div class="rowValue">4,000</div> 
</div> 
<div class="row"> 
    <div class="rowName">THING_3_NO_SPACE</div> 
    <div class="rowValue">150</div> 
</div> 

這裏有一個的jsfiddle看看我到目前爲止有：http://jsfiddle.net/YYUg6/

我的問題是如果標籤是一個像THING_4那樣冗長的單詞，那麼它會將值超出外部容器的寬度。

將標籤包裝到下一行或者甚至隱藏溢出都可以，但我無法以合理的方式實現。我可以將它設置爲使用table-layout：fixed，然後左列不會向右推，但只有在右列設置明確的寬度時纔是實用的，因爲這些列可以包含小到大的數字。

我沒有與顯示器結婚：table和display：table-cell在jsfiddle的div上使用，所以如果所需的外觀可以在沒有這個的情況下實現，那麼我就是爲了它。我只使用display：table來使右列較大時左列變小（所以它比長內容會重疊值更好），但如果沒有任何分詞時它不起作用。

任何想法？謝謝你的幫助！

Answer 1

好吧，我也拉閘得到這個我怎麼想的那樣，除了可悲的事實，我不得不在HTML切換「列」的順序，使浮子按照我的期望工作。不得不改變HTML結構以適應樣式，這讓我感到難過，但我想這就是現實世界的方式。

所以我改變了值和標籤的順序，將值浮動到右邊，刪除了所有的顯示：表垃圾，它工作正常。這裏有一個更新的小提琴看它的行動：http://jsfiddle.net/YYUg6/10/

<div class="wrapper"> 
    <div class="right">325,000</div> 
    <div class="left">thing 1</div> 
</div> 
<div class="wrapper"> 
    <div class="right">4,000</div> 
    <div class="left">thing 2 that is longer</div> 
</div> 
<div class="wrapper"> 
    <div class="right">150</div> 
    <div class="left">THING_3_NO_SPACE_IN_HERE</div> 
</div> 

.wrapper { 
    width: 150px;  
} 
.wrapper, .right, .left { 
} 
.right { 
    float: right; 
    text-align: right; 
    padding-left: 10px; 
} 
.left { 
    word-wrap: break-word; 
    overflow: hidden; 
} 

Answer 2

沒有讀過最後一部分，對不起。

在這裏你去 http://jsfiddle.net/YYUg6/1/

display:tabel-cell; 
vertical-align:middle; 

這裏，忘了東西向上頂，這個怎麼樣？http://jsfiddle.net/YYUg6/2/

另一個更新觀念http://jsfiddle.net/YYUg6/4/