html - 并排定义列表而不换行太长

Question

我有一个 <dl>含短<dt>文本，可能很长 <dd>文本。在我使用它们的布局中，我希望它们并排显示:

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

但是，如果 DD 的内容太长，我只想将其截断(DL 上的 overflow: hidden)。一种简单的方法是给 DD 一个最大宽度，以避免它太大而无法与固定大小的 DT 放在一行中。但是，由于容器的宽度已经固定并通过媒体查询更改，我更喜欢一种解决方案，我不必在 DD 中指定固定宽度的点。同时对 DT 和 DD 使用百分比也不是解决方案，因为在大容器的情况下，这会浪费 DT 中的空间。

显示问题的 fiddle :http://jsfiddle.net/ThiefMaster/fXr9Q/4/

当前的 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; }

Answer 1

更新:我应该先阅读你的整个问题。

脱下float:left;在 <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/

---

旧

因为您已经在 dl 上设置了宽度和 dt , 将这个添加到 dd :

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

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

请注意 - 这是 CSS3 - 不适用于较旧的浏览器 - 它是由您评估这是否是一个问题 - 大多数时候我不介意较旧的浏览器选择稍微差一点的样式。