4

我有一个动态填充的列格式的无序列表，通常每个只有一两个单词<li>，但偶尔会出现更长的列表项。为了保留我的列，我选择用省略号隐藏这些较长项目的多余文本：

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

但我仍然想让用户访问这些项目，所以我创建了一个悬停样式，如下所示：

li:hover {
  overflow: visible;
}

这会将文本显示在列之间的空间中，但在到达相邻的<li>. 我想优先考虑<li>悬停的那个，所以它显示在其他上面并且具有不透明的背景。玩弄z-index并没有奏效。

这是一个小提琴：https ://jsfiddle.net/9p7qeon2/

4

2 回答 2

2

我这样做的方法是在 LI 中添加一个跨度，然后在悬停时将跨度变为position:absolute. 有了它，您可以控制全文的显示方式和样式。唯一的缺点是 LI 需要一个高度，以免由于跨度变得绝对而失去其高度。看看小提琴

于 2016-04-14T18:09:19.313 回答
0

您遇到的问题似乎是列上固定宽度的结果。示例：column-width: 200px由于您在子项上使用悬停，您将无法使用纯 CSS 更改父项的宽度。您必须对.addClass UL（父）元素使用 jQuery 或其他东西，然后使用类似的东西：ul.active { column-width: 300px; }，但这将对所有其他元素产生不良影响。

您会发现以这种方式使用固定宽度会在不同的浏览器中出现很多问题，例如，根据使用的浏览器，您的问题会有所不同：

  • Firefox 将显示全文但不会显示背景颜色。
  • Chrome 和 MS Edge 将显示背景颜色，但不显示全文......坦率地说，这是正确的，因为容器仅限于200px. 我不相信浏览器支持 min-column-width 并且我的测试不能解决这个问题。

您可以使用固定百分比的浮点数，该百分比将显示在较大的屏幕上，然后隐藏在较小的屏幕上。请参阅为您制作的JSFiddle，显然此代码需要调整以符合您的要求，但其方向正确。

摘要...问题是您将 200px 设置为宽度...以覆盖您必须使用的宽度min-width，position: fixed或position: absolute. 这就是我现在能想到的。

于 2016-04-14T16:58:36.507 回答