Как реализовать адаптивное обрезание многострочного текста?

Question

[Роман Лебедев]

Есть небольшой скрипт который обрезает текст и добавляет в конце точки. Как сделать так чтобы текст обрезался адаптивно. Например, чтобы текст на планшете обрезался, а на десктопе показывался полный не обрезанный текст.

<p class="text">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias deleniti consequuntur 
voluptatum numquam libero placeat inventore dolorem, cum nam repudiandae, 
aperiam earum ut quia enim. Expedita quia aliquam nobis quidem.
</p>

var size = 70;
var text = $('.text');

function cropText(element) {
  var newsContent = element;
  var newsText = newsContent.text();

  if (newsText.length > size) {
    newsContent.text(newsText.slice(0, size) + '..');
  }
}

cropText(text);

Этот скрипт на jsfiddle

Answer 1

[lUser L]

UPD: https://codepen.io/5h4dy_s/pen/MWwBEPY

Comments

[Роман Лебедев]

Спасибо. А не подскажите как сделать чтобы когда окно браузера растягивалось например до 1024px, показывался полный не обрезанный текст без перезагрузки страницы?

[Арсений Матыцин]

Роман Лебедев, слушай события окна ресайз

[lUser L]

Роман Лебедев, обновил ответ

Answer 2

[strelok011]

Если опираться только на вебкитовские браузеры (нынче это все кроме ie11 и младше), то

@media (max-width: 700px) {
.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}
}

-webkit-line-clamp: 3; - сколько строк оставлять
https://caniuse.com/#search=line-clamp