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

Есть небольшой скрипт который обрезает текст и добавляет в конце точки. Как сделать так чтобы текст обрезался адаптивно. Например, чтобы текст на планшете обрезался, а на десктопе показывался полный не обрезанный текст.
<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
  • Вопрос задан
  • 92 просмотра
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 1
@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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы