Как с помощью js при уменьшении ширины экрана обрезался текст?

Question

[kravets22]

Есть контейнер с текстом(div class="text"). Нужно, что бы при достижении ширины экрана условных 798рх с текста отрезалось несколько десятков символов, а при достижении 568рх отрезалось еще несколько символов

как решить такую задачу с помощью JS?

Comments

[Ankhena]

Обычный text-overflow из css вам не поможет?

Answer 1

[Mizutsune]

Вообще подобные задачи хорошо решаются и без JS, например если просто нужно обрезать одну строку по ширине родителя, без переноса строки, тогда можно воспользоваться свойством text-overflow.

Пример

.target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Или если нужно обрезать текст по количеству строк, тогда вполне подойдёт webkit-line-clamp.

Пример

.target {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

Однако если всё же хочется сделать с помощью JS, тогда как вариант можно сделать так:



Свойство breakpoints содержит двумерный массив с парами значений: [[min-width, max-width], wordsLimit].