How to avoid line breaks before or after an element?

Question

I have a list of definitions. My <dt> and <dd> are set in CSS as display: inline-block; . And I would like to avoid line breaks before the <dd> element and after the <dt> element. How can i do this?

My list looks like this: with a line break after term3:

term1: def1; term2: def2; term3:
def3;

I want this to look (line break should appear before term3:

term1: def1; term2: def2;
term3: def3;

Answer 1

Single column (valid HTML):

 <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> (Invalid 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 2

This worked for me by simply specifying dt and dd on the same line along with the inline display style, for example:

 <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> 

instead of what I used to have:

 <style type="text/css"> dt, dd { display: inline; } </style> <dl> <dt>term1 <dd>def1 <dt>term2 <dd>def2 <dt>term3 <dd>def3 </dl> 

It seems to work fine when it dynamically resizes the browser window - I never see it break between dt and dd only between dd and dt .

Answer 3

The only way I can do this is to set the width for each of the elements so that each line has a predictable breakpoint.