html - 激活 SPAN 上的溢出省略号,如果可能的话还可以环绕/使用高度

标签 html css

我有 SPAN(放置在 LI 内),如果它们溢出,我想在其上激活省略号 (...) 。然而,问题是我希望它们环绕并使用所有可用的高度。

考虑片段 #1:这不是我想要的,因为框 #1 不应该在一行上省略。有足够的可用高度,因此在这种情况下它应该环绕。框 #2 在这里看起来不错。

.spanbox {
   width: 136.5px;
   text-overflow: ellipsis;
   white-space: nowrap; /* TOGGLING THIS */
   overflow: hidden;
   display: inline-block;
}

.item1 {
   border: 1px solid black;
   height: 134px;
   width: 136.5px;
}

.item2 {
   border: 1px solid black;
   height: 17px;
   width: 136.5px;
}
<li class="item1">
   <span class="spanbox">
   (50min) Food preparation and serving
   </span>
</li>

<li class="item2">
   <span class="spanbox">
   (5min) Talking with friends
   </span>
</li>

这是代码片段#2:这也不是我想要的,因为现在方框#2 中根本没有省略号。但现在我在 Box #1 中得到了多行换行,所以看起来不错。我关闭了 white-space: nowrap 样式。

.spanbox {
   width: 136.5px;
   text-overflow: ellipsis;
   /*white-space: nowrap;*/ /* TURNED OFF NOW */
   overflow: hidden;
   display: inline-block;
}

.item1 {
   border: 1px solid black;
   height: 134px;
   width: 136.5px;
}

.item2 {
   border: 1px solid black;
   height: 17px;
   width: 136.5px;
}
<li class="item1">
   <span class="spanbox">
   (50min) Food preparation and serving
   </span>
</li>

<li class="item2">
   <span class="spanbox">
   (5min) Talking with friends
   </span>
</li>

目标是使用 Box #1 中的所有可用高度,但激活 Box #2 上的省略号,因此是上述两个片段的组合。这可能吗?

最佳答案

看起来通过纯 CSS 是不可能的,只能通过“黑客方式”:https://stackoverflow.com/a/23896375/6053654 。如果 Javascript 解决方案适合您,请查看这篇文章:Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

关于html - 激活 SPAN 上的溢出省略号,如果可能的话还可以环绕/使用高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47251190/

相关文章:

html - 兄弟容器未正确对齐的意外结果

html - 我将如何移动这个 float 的 div?

css - 可变字体和普通字体有什么区别

css - 如果按钮未禁用,则悬停效果?

javascript - 单击复选框时如何更改按钮的颜色

javascript - 绘制圆圈,然后使用 html canvas 和 javascript 移动它

html - 将 div 与垂直居中对齐右对齐

javascript - HTML onUnclick 处理程序?

javascript - 网页截图自定义 CSS

css - 两个简单的CSS问题