Geek asks and answers

Definition list side by side without wrapping too long lines

I have <dl>one containing short texts <dt>and possibly long texts <dd>. In the layout where I use them, I would like them to appear side by side:

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

However, if the contents of the DD are too large, I just want it to be truncated ( overflow: hiddenon DL). One simple way would be to give DD the maximum width so that it does not become too large to fit in line with a fixed-size DT. However, since the width of the container has already been fixed and is being changed using multimedia queries, I would prefer a solution where I do not need to specify a fixed dot dot width. Using percentages for both DT and DD is also not a solution, since in the case of a large container, space in DT will be lost.

Script 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; }
+5
source share
2 answers

: .

float:left; <dd>

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

, ( ), , , whitespace: nowrap , , . white-space , , .

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

dl dt, dd:

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

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

- CSS3 - - , - , .

+8

DT, DD.

DT . DD , .

: nowrap; : ; , .

: http://jsfiddle.net/fLPej/

+1

More articles:


All Articles