html - 在 SPAN 上激活溢出省略号，但如果可能的话也环绕/使用高度

Question

我有 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 上的省略号，因此结合了以上两个片段。这可能吗？

Answer 1

看起来通过纯 CSS 是不可能的，只有一种“hack 方式”:https://stackoverflow.com/a/23896375/6053654 .如果 Javascript 解决方案适合您，请查看此帖子:Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?