Elenco definizioni side-by-side senza avvolgere linee troppo lunghe

Question

Ho un <dl> contenente brevi <dt> testi e possibilmente lunghi <dd> testi. Nel layout dove io li sto usando mi piacerebbe loro di comparire side-by-side:

/==============\ 
|DT DD........| 
|DT DD........| 
|DT DD........| 
\==============/ 

Tuttavia, nel caso in cui il contenuto del DD è troppo lungo Voglio solo che venga troncato (overflow: hidden sulla DL). Un modo semplice sarebbe dare al DD una larghezza massima per evitare che venisse troppo grande per stare in una linea con DT a dimensione fissa. Tuttavia, poiché la larghezza del contenitore è già fissa e cambia tramite le query multimediali, preferirei una soluzione in cui non devo specificare un punto a larghezza fissa il DD. Anche l'utilizzo di una percentuale sia per DT che per DD non è una soluzione in quanto sprecherebbe spazio nel DT in caso di un grande contenitore.

violino che mostra il problema: http://jsfiddle.net/ThiefMaster/fXr9Q/4/

CSS attuale:

dl { border: 1px solid #000; margin: 2em; width: 200px; overflow: hidden; } 
dt { float: left; clear: left; width: 50px; color: #f00; } 
dd { float: left; color: #0a0; white-space: nowrap; } 

Answer 1

Aggiornamento: Ho dovuto leggere l'intera domanda prima.

Togliere la float:left; sul <dd>

http://jsfiddle.net/fXr9Q/26/

Un possibile problema per i principianti che utilizzano questa struttura (come ho già accennato in precedenza) è che essi presumono che l'impostazione di spazi bianchi: nowrap su un elemento impedirà a quell'elemento di passare alla riga successiva se fa parte di un gruppo di caselle flottate. La proprietà white-space, tuttavia, si applicherà solo agli elementi inline all'interno dell'elemento a cui è applicata e non influenzerà gli elementi di blocco o la spaziatura dell'elemento stesso.

http://www.impressivewebs.com/css-white-space/

---

Vecchi

Come impostate larghezze sul dl e dt, aggiungere questo al dd:

dd{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 150px; 
} 

http://jsfiddle.net/fXr9Q/15/

Attenzione, questo è CSS3 - non funzionerà con i browser più vecchi - è per te valutare se questo è un problema o no - il più delle volte non mi dispiace che i vecchi browser ottengano una scelta leggermente peggiore di stili .

Answer 2

Non è necessario impostare la larghezza sia sul DT che sul DD.

Basta dare al DT una larghezza e galleggiare a sinistra. L'impostazione della proprietà di overflow del DD su hidden, consentirà di adattare tutto lo spazio rimanente disponibile.

Quindi white-space: nowrap; e overflow del testo: ellissi; sarà fantastico aggiungere i puntini di sospensione quando il testo è troppo lungo.

Questa è la strada da percorrere: http://jsfiddle.net/fLPej/