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; }
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.
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 .
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.
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).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With