在 SPAN 上激活溢出省略号，但如果可能，还要环绕/使用高度

Question

我有SPAN s(放置在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中根本没有省略号。但是现在我在框 #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>

目标是使用框 #1 中的所有可用高度，但激活框 #2 上的省略号，以便将上述两个代码段组合在一起。这可能吗？

Answer 1

看起来不可能

通过纯 CSS 实现，只能通过"黑客方式"：https://stackoverflow.com/a/23896375/6053654。如果 Javascript 解决方案适合您，请查看这篇文章：跨浏览器多行文本溢出，在宽度和高度固定div 中附加省略号？

Answer 2

这是一个糟糕的解决方案，并非在所有情况下都有效(有关实际解决方案，请参阅可接受的答案(，但基于在普通 CSS/HTML 中不可能的事实，我现在正在迭代我的 LI 并动态添加样式，例如

$('li').each(function(index, item) {
    // Find one Span with text somewhere inside each Event LI
    var innerspan = $(item).find('span');
    // Truncate if SPAN Height < LI (Container) Height
    if ($(this).height() < $(innerspan).height()) {
            // Apply the following CSS
            // The Ellipsis also requires a Width value and overflow=hidden
            var width = $(this).width();
            $(innerspan).css( {  
                               'overflow': 'hidden', 'width' : width,
                               'text-overflow': 'ellipsis', 'white-space': 'nowrap'
                               } );         
        }
        // Otherwise default styling with multiline, no ellipsis
        // (But won't work if need multiline WITH ellipsis!)
    }
});