我有一个动态填充的列格式的无序列表，每个<li> 通常只有一两个词，但偶尔会出现更长的列表项。为了保留我的专栏，我选择用省略号隐藏这些较长项目的多余文本：
li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
但我仍然想让用户访问这些项目，所以我创建了一个悬停样式，如下所示：
li:hover {
overflow: visible;
}
这会将文本显示在列之间的空间中，但在到达相邻的<li> 时会停止。我想优先考虑悬停的<li>，使其显示在其他对象上方并具有不透明的背景。玩弄z-index 并没有成功。
这是一个小提琴：https://jsfiddle.net/9p7qeon2/
【问题讨论】：
标签： css overflow ellipsis css-multicolumn-layout
您遇到的问题似乎是由于列的宽度固定造成的。示例：column-width: 200px 由于您在子项上使用悬停，您将无法使用纯 CSS 更改父项的宽度。您必须使用 jQuery 或 .addClass 到 UL（父）元素，然后使用类似：ul.active { column-width: 300px; }，但这将对所有其他元素产生不良影响。
您会发现以这种方式使用固定宽度会在不同的浏览器中出现很多问题，例如您的问题会因使用的浏览器而有所不同：
200px。我不相信浏览器支持 min-column-width 并且我的测试没有解决这个问题。您可以使用固定百分比的浮点数，该百分比将显示在较大的屏幕上，然后隐藏在较小的屏幕上。请参阅为您制作的JSFiddle，显然此代码需要调整以符合您的要求，但其方向正确。
总结...问题是您将 200px 设置为宽度...要覆盖该宽度，您必须使用 min-width、position: fixed 或 position: absolute。我现在能想到的就这些了。
【讨论】：
column-width 没有width 严格。我看到一些参考资料说您可以将其视为min-width。根据 w3: 我这样做的方法是在 LI 中添加一个跨度，然后在悬停时将跨度变为 position:absolute。有了它，您可以控制全文的显示方式和样式。唯一的缺点是 LI 需要一个高度，以免由于跨度变得绝对而失去其高度。 Check out the fiddle
【讨论】：
position:relative。这是唯一对我有意义的事情。因为我相信跨度对于身体来说是绝对的，而不是它的父 li。