5

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

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

但是，如果 DD 的内容太长，我只想将其截断（overflow: hidden在 DL 上）。一种简单的方法是给 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; }
4

2 回答 2

8

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

脱掉float:left;_<dd>

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

初学者使用这个属性的一个可能的问题（正如我在上面已经提到的）是他们假设在一个元素上设置 whitespace: nowrap 将防止该元素下降到下一行，如果它是一组浮动框的一部分。然而，white-space 属性仅适用于它所应用的元素内部的内联元素，不会影响块元素或元素本身的间距。

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

老的

dl当您在and上设置宽度时dt，将其添加到dd：

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

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

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

于 2012-09-29T13:57:39.550 回答
1

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

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

然后空格：nowrap; 和文本溢出：省略号；每当文本太长时，都会让它喜欢添加省略号。

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

于 2012-09-29T14:15:27.823 回答