truncateText

by niuuin

HTML

<div class="content">
      <div class="con">
        <span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus delectus error blanditiis enim, autem
          quae porro vel, culpa laborum, repellat recusandae magni voluptates! Animi facilis sunt in quis est
          atque.
        </span>
        <span>
          repellat recusandae magni voluptates! Animi facilis sunt in quis est atque.
        </span>
      </div>
      <div class="con">
        <span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. autem quae porro vel, culpa laborum, repellat
          recusandae magni voluptates! Animi facilis sunt in quis est atque.
        </span>
      </div>
      <div class="con">
        <span>

        </span>
      </div>
      <div class="con">
        <span>
          consectetur adipisicing elit. Ducimus delectus error blanditiis enim, autem quae porro vel, culpa
          laborum, repellat recusandae magni voluptates! Animi facilis sunt in quis est atque.
        </span>
      </div>
      <div class="con">
        <span>
          Ducimus delectus error blanditiis enim, autem quae porro vel, culpa laborum, repellat recusandae magni
          voluptates!
        </span>
      </div>
      <div class="con">
        <span>
          repellat recusandae magni voluptates! Animi facilis sunt in quis est atque.
        </span>
      </div>
    </div>

CSS

.content {
   width: 70%;
   margin: 0 auto;
 }

 .con {
   margin: 2rem auto;
   height: 100%;
 }

JavaScript

let items = document.querySelectorAll('.con');

window.addEventListener('resize', () => {
  items.forEach(element => {
    if (window.innerWidth < 500)
      element.innerText = truncateText(element, 100);
  });

});

function truncateText(element, maxLength) {
  let truncated = element.innerText;
  if (truncated.length > maxLength) {
    truncated = truncated.substr(0, maxLength) + '...';
  }
  return truncated;
}