Come evitare le interruzioni di riga PRIMA O DOPO un elemento?

Question

Ho una lista di definizioni. Il mio <dt> e <dd> sono impostati in CSS come display: inline-block;. E vorrei evitare l'interruzione di linea prima dell'elemento <dd> e dopo l'elemento <dt>. Come posso farlo?

Mia lista si presenta così, con un'interruzione di linea dopo termine3:

term1: DEF1; term2: def2; term3:
def3;

voglio farlo sembrare come questo (l'interruzione di riga dovrebbe apparire prima termine3:

term1: DEF1; termine2: dEF2;
termine3: DEF3;

Answer 1

L'unico modo Posso pensare di fare questo è impostare la larghezza per ciascuno degli elementi in modo che ci sia un punto di rottura prevedibile su ogni riga

Answer 2

Singola colonna (HTML valido):

<style type="text/css"> 
    dt, dd { display: inline-block; float: left; } 
    dt { clear: left; } 
</style> 

<dl> 
    <dt>term1</dt><dd>def1</dd> 
    <dt>term2</dt><dd>def2</dd> 
    <dt>term3</dt><dd>def3</dd> 
</dl> 

No-Wrap <span> (non valido HTML):

<style type="text/css"> 
    dt, dd { display: inline-block; } 
    span { white-space: nowrap; } 
</style> 

<dl> 
    <span><dt>term1</dt><dd>def1</dd></span> 
    <span><dt>term2</dt><dd>def2</dd></span> 
    <span><dt>term3</dt><dd>def3</dd></span> 
</dl> 

Answer 3

Per me ha funzionato semplicemente specificando il dt e dd sulla stessa linea insieme a inline stile di visualizzazione, in questo modo:

<style type="text/css"> 
    dt, dd { display: inline; } 
</style> 

<dl> 
    <dt>term1</dt><dd>def1</dd> 
    <dt>term2</dt><dd>def2</dd> 
    <dt>term3</dt><dd>def3</dd> 
</dl> 

invece di quello che avevo prima:

<style type="text/css"> 
    dt, dd { display: inline; } 
</style> 

<dl> 
    <dt>term1 
    <dd>def1 
    <dt>term2 
    <dd>def2 
    <dt>term3 
    <dd>def3 
</dl> 

sembrano funzionare bene quando si ridimensiona dinamicamente la finestra del browser - non vedo mai si rompe tra il dt e dd solo tra dd e dt.