我有 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/