css – 如何设置溢出的文本样式？

2023年1月6日 232次阅读

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

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

但是我仍然想让用户访问这些项目,所以我创建了一个像这样的悬停样式：

li:hover {
  overflow: visible;
}

这会将文本显示在列之间的空间中,但在到达相邻的< li>时会停止.我想优先考虑< li>这是悬停的,所以它显示在其他人之上并且具有不透明的背景.玩z-index并不能解决问题.

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

最佳答案 我这样做的方法是在LI中添加一个span,然后在悬停时,span将变为position：absolute.通过此,您可以控制全文的显示方式和样式.唯一的缺点是LI需要一个高度,因为跨度变得绝对,所以不会失去高度.
Check out the fiddle

点赞