定义列表并排，不包括太长的行 [英] Definition list side-by-side without wrapping too-long lines

问题描述

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

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........|
\==============/

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

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.

显示问题的小提琴： a href =http://jsfiddle.net/ThiefMaster/fXr9Q/4/> http://jsfiddle.net/ThiefMaster/fXr9Q/4/

Fiddle showing the problem: 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; }

推荐答案

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

Update: I should have read your entire question first.

在< dd> 上取消 float：left; code>

Take off the float:left; on the <dd>

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

使用此属性的初学者可能遇到的一个问题（我已经在上面提到过），他们假设设置空格：nowrap在一个元素将阻止该元素下降到下一行，如果它是一组浮动框的一部分。但是，white-space属性仅适用于应用于的元素内部的内联元素，并且不会影响块元素或元素本身的间距。

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 - 将无法在旧版浏览器上使用 - 你可以评估这是否是一个问题 - 大部分时间我不介意老的浏览器得到一个稍微更糟的样式选择。

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.

这篇关于定义列表并排，不包括太长的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！