Question

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

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

但是，如果DD的内容太长，我只是希望它被截断（DL上的overflow: hidden）。一种简单的方法是给DD一个最大宽度，以避免它太大而不能与固定尺寸的DT匹配在一条线上。但是，由于容器的宽度已经固定并且通过媒体查询更改，我更喜欢一种解决方案，我不必在DD中指定固定宽度点。使用DT和DD的百分比也不是解决方案，因为如果是大容器，这将浪费DT中的空间。

小提琴显示问题：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/

使用此属性的初学者的一个可能问题（正如我上面已经提到过的）是他们假设设置空格：nowrap on元素将阻止该元素掉落到下一行，如果它是一组浮动的一部分框。但是，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 - 无法在旧版浏览器上运行 - 您可以评估这是否是一个问题 - 大部分时间我都不介意旧浏览器的样式选择稍差一些。

Answer 2

您无需在DT和DD上设置宽度。

只需给DT一个宽度，然后向左浮动。将DD的overflow属性设置为hidden，将使其适合所有可用的剩余空间。

然后是白色空间：nowrap;和文本溢出：省略号;每当文字太长时，都会花时添加省略号。

这是要走的路：http://jsfiddle.net/fLPej/

定义列表并排，不包括太长的行

2 个答案: