Question

我有点问题。我想出了一种使用crossbrowser多线省略号的方法。这是我的css mixin。正如你所看到的，这个版本在webkit和＃34; ok＆＃34;在所有的浏览器中。

.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%)
  }
}

我的问题是，我使用了一个read-more链接来添加和删除类＆＃34; hide＆＃34;。这样做很完美，但如果摘录div只有2行文本，则链接也是可见的。如果需要省略号，我需要一种方法来显示链接。

这是一个codepen例子 http://codepen.io/janwagner/pen/ubHef

我更喜欢用CSS来解决这个问题：）

THX很多!!!

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语句来显示或隐藏read more按钮，具体取决于段落的行数。像这样：

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

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

1 个答案: