Come posso rendere il testo di questo div wrap?

Question

Ho una semplice struttura HTML che assomiglia:

<div class="container"> 
    <div class="caption"> 
     <div class="title">This is a very, very long title!!!</div> 
     <div class="details">Details</div> 
    </div> 
    <div class="content"></div> 
</div> 

ho Styled questo modo molto semplice:

.container { 
    min-width: 200px; 
} 
.caption { 
    overflow: hidden; 
} 
.title { 
    float: left; 
} 
.details { 
    float: right; 
} 
.content { 
    height: 200px; 
    background-color: #c0c0c0; 
} 

che assomiglia a:

Se rifuggo la finestra abbastanza alla fine il div "dettagli" si avvolgerà alla riga successiva:

Quello che vorrei per accadere è il testo all'interno del div involucro "titolo" alla riga successiva, ma mantenere entrambi "titolo" e "dettagli" presso la stessa linea (non da imballaggio).

Qualcosa di simile:

This is a very, very   Details 
long title!!! 
+----------------------------------+ 

Con il titolo solo avvolgendo una volta non c'è abbastanza spazio, come la finestra viene ridimensionata.

Qualcuno può indicarmi la direzione giusta per raggiungere questo obiettivo?

Here is a jsFiddle of the above code if anyone is interested.

Modifica: Per chiarire, vorrei non specificare una larghezza fissa per .title se possibile. Nella maggior parte dei casi mi piacerebbe lasciare che questo div divenga largo quanto ha bisogno.

Answer 1

Upate il vostro div Titolo come segue e avvolgerà il testo.

.title 
{ 
    float: left; 
    width: 100px; //or whatever you want 
} 

o

.title 
{ 
    float: left; 
    width: 20%; //or whatever you want 
} 

Answer 2

questo dovrebbe funzionare:

http://jsfiddle.net/KV8UW/

<div class="container"> 
<div class="caption"> 
    <div class="details">Details</div> 
    <div class="title">This is a very, very long title!!!</div> 
</div> 
<div class="content"></div> 

.container { 
    min-width: 200px; 
} 
.caption { 
    overflow: hidden; 
} 
.details { 
    float: right; 
} 
.content { 
    height: 200px; 
    background-color: #c0c0c0; 
} 

Answer 3

utilizzare il display per il layout: http://jsfiddle.net/3nBDd/15/

.caption { 
    display:table; 
    width:100%; 
} 
.title { 
    display:table-cell; 
    text-align: left; 
} 
.details { 
    display:table-cell; 
    text-align right; 
}