Блог

Для начала созданим два миксина. Первый для перенос слов, второй для скрытия текст.

@mixin break_word

@mixin break_word(){
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

overflow-wrap: break-word - управляет переносом слов, которые не помещаются по длине в родительский элемент, слово разбивается в любом месте, если не помещается в размеры, заданные родительскому элементу;

word-wrap: break-word - управляет переносом длинных слов, если они не помещаются в родительский блок, слово переносится на любой букве при достижении края родительской области;

word-break: break-word - управляет переносом длинных слов, если они не помещаются в родительский блок, слово переносится на любой букве при достижении края родительской области.

@mixin text_count_line

@mixin text_count_line($count){
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $count;
  -webkit-box-orient: vertical;
  @include break_word();
}

$count - количество строк;

text-overflow - определяет, как будет обрезаться текст, если он не влезает в доступную область полностью;

webkit-line-clamp - Ограничивает текст заданным числом строк. Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие;

@include break_word() - вызов предыдущего миксина.

Вызов

.element{
  @include text_count_line(1);
}

Демонстрация