限制Firefox中的文本行数

Question

当我在Firefox中加载this staging site时，我看到以下内容：

我在Chrome或Safari中没有看到这个差距，因为以下CSS规则将推文文本内容限制为3行：

#ctf p.ctf-tweet-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

看起来此规则在Firefox中无效。

如何限制Firefox中的文本行数？感谢。

以下是生成推文内容的HTML：

<div class="ctf-tweet-content">
    <p class="ctf-tweet-text" style="color: #ffffff;">A great article about keeping mining education relevant in Western Australia 
        <a href="https://twitter.com/Matt_Mckenzie_" target="_blank" rel="nofollow" style="color: rgb(255, 255, 255);">@Matt_Mckenzie_</a>
        <a href="#" title="#" target="_blank" style="color: rgb(255, 255, 255);">link</a>
    </p>
</div>

Answer 1

This answer提供了应用于webkit浏览器的CSS，但有Mozilla Firefox和其他浏览器的后备：

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}