Question

我有一个项目列表，我在浮动列表中显示，列表中的每个项目都是固定宽度，因此每行有两个项目。防止这种可怕事情发生的最佳做法是什么：

alt text http://x01.co.uk/floated_items.gif

Possibilites：

在显示数据之前修剪指定数量的字符。需要猜测有多少个字符是“安全的”。
溢出：隐藏。哈克。
删除背景，每个项目只有一个上边框。

可能但很愚蠢：

通过执行overflow：auto，在每个项目中都有一个滚动条，这看起来很可怕。
将背景图像添加到容器中。不能保证总是有相同数量的项目，因此该选项已经用完。

对这个恼人的问题的任何帮助表示赞赏！

Answer 1

您使用的是固定字体大小，即在px中指定吗？如果不是，您还需要考虑每个浏览器的各种文本大小选项，这可能会使修剪字符串的概念变得多余。如果它是固定的，那么可能看到你可以容纳多少Ws并将你的文本限制为-3并附加省略号，不确定这个列表是什么，这是一种方法。

就我个人而言，我可能会使用overflow：hidden，因为它涵盖了所有可能性，并确保它始终保持您的布局一致。

我想最后一个选择是严格控制可以添加到列表中的内容并防止首先出现问题。正如他们所说，预防胜于治疗，虽然可能无益。

Answer 2

有些脚本通过比较两个块中的li并使它们都等于最高层来帮助解决这个问题。

通常情况下，不要从css的角度思考什么是最好的，你应该考虑你想要的演示文稿，然后使用css / JavaScript来达到你想要的效果。

如果这只是您想要的东西，请考虑使用渐变背景图像突出显示li的顶部并建议块而不实际填充它。

添加jQuery解决方案的链接：Equalize

Answer 3

一种解决方案是使用基于alpha的PNG，在最后10px左右，将文本缓慢淡入容器的backgroundcolor。如果某些文本比长文本短，那么看起来会很好，但是在文本与容器相同的情况下，它看起来有点傻。

当然，结合display：hidden和white-space：no-wrap

Answer 4

从可访问性的角度来看，简单地隐藏标题并不是一个好主意，因为这可能会隐藏由于视力不好而增加字体大小的人的内容。你的设计应该能够在被不良分辨率或类似障碍物撞击时漂浮，即使它漂浮在不太悦目的东西上。

现在，如果我正确理解您的背景图片问题，我相信您的问题可以使用sliding doors上的ALA文章中描述的技术来解决，其中背景图片随内容展开。

Answer 5

这里有一些争议..用一张桌子？

听起来你有一个数据网格给我，表会为你回答这个问题吗？

它还提出了一个问题，你真的希望这些物品的高度相同，或者只是背后有相同数量的黑色背景吗？您可以将黑色应用于行的背景，然后创建带边框和边距的中心白色分隔符。

Answer 6

您可以尝试使用：

ul li{
  display:block;
  float:left;
  width:6em;
  height:4em;
  background-color:black;
  color:white;
  margin-right:1em;
}
ul{
  height:100%;
  overflow:hidden;
}
div{
  height:3em;
  overflow:hidden;
  background-color:blue;
}

通过以下方式不了解跨浏览器的一致性。编辑：这是我假设的HTML：

<div>
<ul>
<li>asdf
<li>asdf trey  tyeu ereyuioquoi
<li>fdas dasf erqwt ytwere r
<li>dfsaklñd s jfañlsdjf ñkljdk ñlfas
<li>ksdflñajñldsafjñlksdjfñalksdfjlkdhfc,v.mxzn
</ul>
</div>

显示未知长度的字符串时，最佳UI / CSS组合是什么？

6 个答案: