Definition List Side-by-side Without Wrapping Too-long Lines

I have a

containing short

texts and possibly long

texts. In the layout where I'm using them I'd like them to appear side-by-side: /==============\

Solution 1:

Update: I should have read your entire question first.

Take off the float:left; on the <dd>

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

One possible problem for beginners using this property (as I already alluded to above) is that they assume that setting whitespace: nowrap on an element will prevent that element from dropping to the next line if it is part of a group of floated boxes. The white-space property, however, will only apply to the inline elements inside of the element its applied to, and will not affect block elements or the spacing of the element itself.

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

---

Old

As you have set widths on the dl and dt, add this to the dd:

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

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

Be aware - this is CSS3 - will not work on older browsers - it is for you to evaluate if this is a problem or not - most of the time I don't mind older browsers getting a slightly worse pick of styles.

Solution 2:

You don't need the set the width both on the DT and DD.

Just give the DT a width, and float left. Setting the DD's overflow property to hidden, will let it fitting all the available remaining space.

Then white-space: nowrap; and text-overflow: ellipsis; will make it fancy adding the ellipsis whenever the text is too long.

This is the way to go: http://jsfiddle.net/fLPej/