css - 限制 Firefox 中的文本行数

Question

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

我在 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 */
}