在 IE 中将文本截断为 3 行

Question

我有一个简单的 span 标签，其内容跨越多行，我想出了如何将其限制为 3 行，然后用省略号 (...) 跟进

问题是，它在 IE11 中不起作用，我想这样做。这是我的代码：

HTML：

<span class="itemLabel">
     This is Line 1<br/>
     This is Line 2<br/>
     This is Line 3<br/>
     this is Line 4<br/>
     this is Line 5<br/>
</span>

CSS：

.itemLabel{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 11px;
}

现在跨度的内容是动态填充的，所以我对放入跨度的文本量进行了零控制，并且我们在围绕该跨度和产品的锚标记上设置了 180 像素的宽度图像，所以我不能简单地“不要使用尽可能多的中断标签”，我把它们放在那里作为一个例子，即使有 5 行存在，CSS 也会将跨度截断为最大 3。

如何在 IE 中实现同样的显示效果？

Answer 1

由于没有跨浏览器解决方案，我需要某种方式来限制用户友好设计中的文本输出。后端 [数据库] 导出三 (3) 条不同的可能信息，标题、作者、价格（问题是标题和/或作者会出现多行）。

我得到的解决方案是简单地将这三段信息分成三个独立的跨度，并将自动换行/省略号的跨浏览器解决方案应用于每一行。我向客户介绍了这个，解释了限制，他们对这个解决方案很好。

当涉及到 UI/UX 和响应式设计的新进展时，IE/Edge 似乎越来越不可靠。我们最后的检查是，只有 3% 的客户仍在使用 IE/Edge 作为他们选择的浏览器。