4

少し問題があります。クロスブラウザの複数行の省略記号を使用する方法を考え出しました。これが私の少ないcssミックスインです。ご覧のとおり、このバージョンは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%)
  }
}

私の問題は、続きを読むリンクを使用して、クラス「hide」を追加および削除することです。これは完璧に機能しますが、抜粋divに2行のテキストしかない場合にもリンクが表示されます。省略記号が必要な場合は、リンクを表示する方法が必要です。

これがcodepenの例です http://codepen.io/janwagner/pen/ubHef

私はこれを修正するためのCSSのみの方法を好みます:)

ありがとう！！！

4

1 に答える 1

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;
}
于 2013-03-22T16:27:38.050 に答える