Как в пагинацию добавить точки?

const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare accumsan bibendum. Donec facilisis vel lorem sed vehicula. Nunc sit amet quam eros. Duis scelerisque ante id arcu tempor rutrum. Nunc vel neque ligula. Integer eu porttitor risus. Quisque eu pretium nisi, sit amet hendrerit libero. Aliquam ullamcorper nisl eu diam consequat, a malesuada nunc efficitur. Proin elementum lacus nisi, et vehicula nunc placerat non. Curabitur in mi rutrum nulla mattis eleifend. Integer id orci a sem consectetur elementum quis quis sem. Sed eget est lacinia, vehicula augue a, ullamcorper nunc. Donec eu mi fermentum sapien interdum lacinia at in justo. Nunc varius purus eu libero vestibulum, id lacinia nisi sagittis.'

class Pagination {
  constructor($context, linkItems) {
    this.$context = $context;
    this.linkItems = linkItems;
    this.itemsCount = linkItems.length;
    this.itemsCountOnPage = $context.dataset.linksPerPage;
    this.pagination = $context.querySelector('.pagination');
    this._pagItems = null;
    this.pageCount = Math.ceil(this.itemsCount / this.itemsCountOnPage);
    this.currentPage = 'pager-item_current';
    this.page = null;

    for (let i = 0; i < this.linkItems.length; i++) {
      this.linkItems[i].dataset.num = i + 1;
    }
  }

  set(value) {
    this._pagItems = value;
  }

  get() {
    return this._pagItems;
  }

  createItems() {
    this.pagination.innerHTML = this.get();
  }

  paginationItemTemplate(count, num) {
    const result = (count - 1) * num;
    return `
        <li class="pager__item pager-item" id="page${count}" data-page="${result}" data-on-page="${num}" data-page-num="${count}">
            ${count}
        </li>
    `;
  }

  countItems() {
    let page = '';
    for (let i = 0; i < this.pageCount; i++) {
      page += this.paginationItemTemplate(i + 1, this.itemsCountOnPage);
    }
    this.set(page);
  }

  showFirstPage() {
    for (let i = 0; i < this.linkItems.length; i++) {
      if (i < this.itemsCountOnPage) {
        this.linkItems[i].style.display = 'block';
      } else {
        this.linkItems[i].style.display = 'none';
      }
    }

    this.page = document.getElementById('page1');
    this.page.classList.add(this.currentPage);
  }

  init() {
    this.countItems();
    this.createItems();
    this.showFirstPage();
    this.colorCurrentPage();
  }

  colorCurrentPage(current) {
    this.page.classList.remove(this.currentPage);
    this.page = current || document.getElementById('page1');
    this.page.classList.add(this.currentPage);
  }

  togglePage(e) {
    const {
      target
    } = e;
    const data_page = target.dataset.page;
    let j = 0;
    for (let i = 0; i < this.linkItems.length; i++) {
      const data_num = this.linkItems[i].dataset.num;
      if (data_num <= data_page || data_num >= data_page) {
        this.linkItems[i].style.display = 'none';
      }
    }
    for (let i = data_page; i < this.linkItems.length; i++) {
      if (j >= this.itemsCountOnPage) break;
      this.linkItems[i].style.display = 'block';
      j++;
    }
    this.colorCurrentPage(target);
  }
}





const context = document.querySelector('.wrapper');
const list = context.querySelector('.list');

let itemsList = '';

function template(word) {
  return `
  <li class="item">
      ${word}
    </li>
  `
}

const array = text.split(' ');
array.forEach(word => {
  itemsList += template(word);
})


list.innerHTML = itemsList;

const item = context.querySelectorAll('.item');
const pagination = new Pagination(context, item);
pagination.init();

const pagerItemsCollection = context.querySelectorAll('.pager__item');
pagerItemsCollection.forEach(item => {
  item.addEventListener('click', e => {
    pagination.togglePage(e);
  });
});

.pager__item {
  list-style: none;
  display: inline-block;
  margin-right: 10px;
}

.pager-item {
  padding: 0;
  color: #444;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: all 0.3s;
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

.pager-item:hover,
.pager-item_hovered {
  background-color: #f8f8f8;
  border-color: #f8f8f8;
}

.pager-item_current {
  font-weight: bold;
  color: #fff;
  background-color: #009ce1;
  cursor: default;
}

.pager-item_current:hover {
  background-color: #009ce1;
}

.pager-item_type_before,
.pager-item_type_after {
  font-size: 16px;
  color: #009ce1;
  text-align: center;
}

.pager-item_type_ellipsis {
  border-radius: 0;
  color: #009ce1;
  cursor: default;
  text-align: center;
  width: 16px;
}

.pager-item_type_ellipsis::before {
  content: "...";
}

<div class="wrapper" data-links-per-page="10">
  <ul class="list">

  </ul>
  <ul class="pager pagination"></ul>
</div>