隱藏css3多行省略號閱讀更多的鏈接，當沒有使用

我有一個小問題。我想出了一種使用crossbrowser多行省略號的方法。這是我的css mixin。正如你所看到的，這個版本在webkit中是完美的，而在所有其他瀏覽器中都是「ok」。隱藏css3多行省略號閱讀更多的鏈接，當沒有使用

.ellipsis-multi(@lh, @l, @mw) { 
    /* non-webkit */ 
    max-height: @lh*@l; 
    /* webkit */ 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: @l; 
    display: -webkit-box; 
    line-height: @lh; 
    max-width: @mw; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
.excerpt {  
    &.hide { 
    .ellipsis-multi(1.4em, 3, 100%) 
    } 
}

我的問題是，我用一個多讀鏈接來添加和刪除類「隱藏」。這工作完美，但鏈接也是可見的，如果摘錄div只有2行文字。如果需要省略號，我需要一種方法來顯示鏈接。

這裏是一個codepen exapmple http://codepen.io/janwagner/pen/ubHef

我寧願只CSS來解決這個問題:)

THX了很多辦法！

來源

2013-03-22 Jan Wagner

CSS沒有辦法知道有多少行文本正在顯示，所以我現在可以告訴你，只有CSS解決方案是不可能的。某些類型的腳本需要參與，所以我建議你在你的問題中添加一些標籤。 – ScottS 2013-03-22 15:17:07

完成:)謝謝 – 2013-03-26 09:26:21

你無法用CSS做到這一點。但是，您可以使用下面的函數來計算你的行數：

var divHeight = $('.excerpt p').height(); 
var x = ('.excerpt p').css('line-height'); 
lineHeight = parseInt(x); // Returns clean line-height 
var lines = divHeight/lineHeight; // Returns number of lines

如果語句要麼顯示然後只需使用一個或隱藏取決於款有多少行具有更多按鈕。例如：

if(lines > 4){ 
$('.readmore').show; 
}else{ 
$('.readmore').hide; 
}

來源

2013-03-22 16:27:38 bukka

非常感謝。這個解決方案應該可以正常工作:) – 2013-03-26 09:28:01

如果你相信這是正確的答案，那麼對未來的訪問者來說就是這樣。我很高興我的幫助。 – bukka 2013-03-26 15:31:10

隱藏css3多行省略號閱讀更多的鏈接，當沒有使用

回答

相關問題