Firefox瀏覽器中的多行文本省略號

我發現瞭如何通過使用css3來創建多行文本省略號。Firefox瀏覽器中的多行文本省略號

這是我找到的鏈接。 http://codepen.io/martinwolf/pen/qlFdp

在Chrome瀏覽器中，它是正確的，但在Firefox瀏覽器中，它是錯誤的。

如何製作ellipsis的multi-line text在Firefox瀏覽器中使用css3？

重要這個問題是如何在處理多行文本的Firefox使用只CSS3 ...

來源

2017-01-06 Star_Man

相關：新課標下一個省略號以多行文本（http://stackoverflow.com/q/33058004/3597276） –

[應用省略號的可能的複製到多行文本]（https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text） – dippas

@dippas，不重複。這個問題只是Firefox瀏覽器的問題 –

我會分享我發現： http://revelry.co/multi-line-ellipsis-using-pure-css/

但有點bug，必須定義背景顏色。透明不起作用。在:before我可以使用透明，但:after必須定義確切的顏色。

所以，我最後的CSS是：

.text-truncate { 
    display: block; /* Fallback for non-webkit */ 
    display: -webkit-box; 
    max-width: 280px; 
    max-height: 72px; 
    margin: 0 auto; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis; /* required for Opera */ 
    -ms-text-overflow: ellipsis; /* required for IE8, allegedly */ 
    /* Firefox solution: */ 
    @-moz-document url-prefix() { 
    overflow: hidden; 
    position: relative; 
    &:before { 
     background: transparent; 
     bottom: 0; 
     position: absolute; 
     right: 0; 
     float: right; 
     content: '\2026'; 
     margin-left: -3rem; 
     width: 3rem; 
    } 
    &:after { 
     content: ''; 
     background: #fcfcfc; 
     position: absolute; 
     height: 50px; 
     width: 100%; 
     z-index: 1; 
    } 
    }

來源

2017-06-29 14:27:51 Zmogas

Firefox瀏覽器中的多行文本省略號

回答

相關問題