限制Firefox中的文本行数 [英] Limit number of lines of text in Firefox

问题描述

当我在Firefox中加载

在Chrome或Safari中，我看不到这种差距，因为根据以下CSS规则，tweet文本内容限制为3行:

  #ctf p.ctf-tweet-text {溢出:隐藏；显示:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:垂直;} 

该规则似乎不适用于Firefox.

如何限制Firefox中的文本行数?谢谢.

以下是产生推文内容的HTML:

 < div class ="ctf-tweet-content">< p class ="ctf-tweet-text" style ="color:#ffffff;">有关在西澳大利亚州保持采矿教育相关性的一篇很棒的文章< 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> 

解决方案

此答案提供了适用于webkit的CSS浏览器，但Mozilla Firefox和其他浏览器具有后备功能:

  .giveMeEllipsis {溢出:隐藏；文字溢出:省略号；显示:-webkit-box;-webkit-box-orient:垂直;-webkit-line-clamp:N;/*要显示的行数*/行高:X;/* 倒退 */最大高度:X * N;/* 倒退 */} 

When I load this staging site in Firefox, I see the following:

I don't see this gap in Chrome or Safari because the tweet text content is limited to 3 lines by the following CSS rule:

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

It looks like this rule is not working in Firefox.

How do I limit the number of lines of text in Firefox? Thanks.

Here is the HTML producing the tweet content:

<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>

解决方案

This answer provides the CSS that applied to webkit browsers but has a fallback for Mozilla Firefox and other browsers:

.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 */
}

这篇关于限制Firefox中的文本行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！