Definition list side-by-side without wrapping too-long lines

问题

I have a <dl> containing short <dt> texts and possibly long <dd> texts. In the layout where I'm using them I'd like them to appear side-by-side:

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

However, in case the DD's content is too long I just want it to be truncated (overflow: hidden on the DL). One easy way would be giving the DD a max-width to avoid it to be come too big to fit in one line with the fixed-size DT. However, since the container's width is already fixed and changes via media queries I'd prefer a solution where I do not have to specify a fixed width dot the DD. Using a percentage for both the DT and DD is also not a solution since that would waste space in the DT in case of a big container.

Fiddle showing the problem: http://jsfiddle.net/ThiefMaster/fXr9Q/4/

Current CSS:

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

回答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.

回答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/

来源：https://stackoverflow.com/questions/12653246/definition-list-side-by-side-without-wrapping-too-long-lines