скрыть многострочное многоточие css3, прочитать дополнительную ссылку, когда это бесполезно

У меня небольшая проблема. Я нашел способ использовать кроссбраузерное многострочное многоточие. Вот мой миксин less css. Как видите, эта версия отлично работает в webkit и «хорошо» во всех других браузерах.

.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 :)

Большое спасибо!!!


javascript css less multiline ellipsis
person Jan Wagner    schedule 22.03.2013    source источник
comment
У CSS нет возможности узнать, сколько строк текста отображается, поэтому я могу сказать вам прямо сейчас, что решение только с помощью CSS невозможно. Потребуется какой-то сценарий, поэтому я предлагаю вам добавить некоторые из этих тегов к вашему вопросу.   -  person ScottS    schedule 22.03.2013

Ответы (1)


arrow_upward
1
arrow_downward

Вы не можете сделать это только с помощью 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;
}
person bukka    schedule 22.03.2013
comment
Если вы считаете, что это правильный ответ, пометьте его как таковой для будущих посетителей. Я рад, что помог. - person bukka; 26.03.2013