How do I avoid line breaks BEFORE OR AFTER an element?

I have a definition list. My <dt> and <dd> are set in CSS as display: inline-block;. And I would like to avoid line b开发者_JAVA百科reak before the <dd> element and after the <dt> element. How can I do it?

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

term1: def1; term2: def2; term3:

def3;

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

term1: def1; term2: def2;

term3: def3;

---

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>

---

For me it worked by just specifying the dt and dd on the same line together with inline display style, like this:

<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 earlier had:

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

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

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

---

The only way I can think of to do this is to set the width for each of the elements so there is a predictable break point on each line.