Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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; }
like image 781
ThiefMaster Avatar asked Sep 29 '12 13:09

ThiefMaster


People also ask

How do you put multiple lines on one line in HTML?

You can use display:inline-block . This property allows a DOM element to have all the attributes of a block element, but keeping it inline.

How do you style DT and DD so on the same line?

This can be accomplished by adding a DIV element with the CSS overflow: hidden; around the content of the DD tag. You can omit this extra DIV , but the content of the DD tag will wrap under the floated DT .

What is DT DD DL in HTML?

Definition and UsageThe <dd> tag is used to describe a term/name in a description list. The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names). Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.

What is a DL tag?

Definition and Usage The <dl> tag defines a description list. The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).


1 Answers

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.

like image 56
Harry Avatar answered Sep 22 '22 06:09

Harry