html – 并排列表并排包裹太长的行

概述我有一个< dl>包含短< dt>文本和可能长的< dd>文本.在我使用它们的布局中,我希望它们并排显示： /==============\|DT DD........||DT DD........||DT DD........|\==============/ 但是,如果DD的内容太长,我只希望它被截断(溢出：隐藏在DL上).一种简单的方法是给DD一个最大宽度,以避免它太大而无法与 我有一个< dl>包含短< dt>文本和可能长的< dd>文本.在我使用它们的布局中,我希望它们并排显示：

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

但是,如果DD的内容太长,我只希望它被截断(溢出：隐藏在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; }

解决方法 更新：我应该先阅读你的整个问题.

取下浮子：左;在< 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 – 不适用于旧版浏览器 – 它是为了评估这是否是一个问题 – 大多数时候我不介意旧浏览器获得更糟糕的样式选择.

总结

以上是内存溢出为你收集整理的html – 并排列表并排包裹太长的行全部内容，希望文章能够帮你解决html – 并排列表并排包裹太长的行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。