没有使用时隐藏css3多行省略号阅读更多链接

Question

我有一个小问题。我找到了一种使用跨浏览器多行省略号的方法。

这是我的 less CSS mixin。

正如您所看到的，这个版本在webkit中运行完美，在所有其他浏览器中运行“ok”。

.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 示例 http://codepen.io/janwagner/pen/ubHef

我更喜欢仅 CSS 的方法来解决这个问题:)

Answer 1

仅使用 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 语句即可根据段落的行数显示或隐藏“阅读更多”按钮。像这样的东西：

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