0

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

enter image description here

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>
Steve
  • 2,066
  • 13
  • 60
  • 115
  • Possible duplicate of [With CSS, use "..." for overflowed block of multi-lines](https://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines) – Gerardo BLANCO May 10 '18 at 02:24

1 Answers1

2

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 */
}
Steve
  • 2,066
  • 13
  • 60
  • 115