Trim the preview height using traditional overflow

`-webkit-line-clamp` is broken in Firefox and Safari once complex HTML is used.

See https://community.woltlab.com/thread/291373-rich-embeds-mit-liste-fehlerhaft/

diff --git a/wcfsetup/install/files/style/ui/embeddedContent.scss b/wcfsetup/install/files/style/ui/embeddedContent.scss
index d3107ae3cf025365fe0d444a50f5f88ccf0d38c4..660640ec0f18c214b4b223f471d6d83a65eacd0b 100644 (file)
--- a/wcfsetup/install/files/style/ui/embeddedContent.scss
+++ b/wcfsetup/install/files/style/ui/embeddedContent.scss
@@ -71,10 +71,19 @@
 
 .embeddedContentDescription {
        color: $wcfContentDimmedText;
-       display: -webkit-box;
+       max-height: calc(5 * #{$wcfFontLineHeight}em);
        overflow: hidden;
-       -webkit-line-clamp: 4;
-       -webkit-box-orient: vertical;
+       position: relative;
+       
+       &::after {
+               background-image: linear-gradient(to top, rgba(250, 250, 250, 1), rgba(250, 250, 250, 0));
+               content: "";
+               left: 0;
+               height: #{$wcfFontLineHeight}em;
+               position: absolute;
+               right: 0;
+               top: calc(4 * #{$wcfFontLineHeight}em);
+       }
 }
 
 .embeddedContentMeta {