Как повторить сокращение текста из дефолтного файлового инпута, на чистом js?

Question

В общем есть потребность сокращать текст так как это делает дефолтный input с типом file если в него положить файл с длинным названием. Только это нужно делать динамически и не с файлом а с любим html элементов который содержит текст, будь то p, h1, span, div и тому подобные.

Все до чего я дошел это вот такой метод. Но он не оптимальный так как остается отступ с правой стороны и текст не занимает все 100% длины родителя.

Пример сокращение из input и мой результат:

function truncateMiddleWithEllipsis() {
  const allTruncates = document.getElementsByClassName("truncateMiddle");
  [...allTruncates].forEach((element) => {
    const dadaSetText = element.dataset.text || element.innerText;
    const parentElementWidth = element.parentElement.clientWidth;

    const fontSize = window
      .getComputedStyle(element)
      .getPropertyValue("font-size")
      .replace("px", "");

    const textLength = dadaSetText.length;

    const maxSymbol = Math.round((parentElementWidth * 2) / Number(fontSize));
    const half = Math.round(maxSymbol / 2);
    const startMax = half - 5 === 0 ? half : half - 5;
    const endMax = half === startMax ? half - 5 : half + 5;
    const startEnd = textLength - endMax;

    const insertTextStart = dadaSetText.substring(0, startMax);
    const insertTextEnd = dadaSetText.substring(startEnd, textLength - 1);
    const insertText = `${insertTextStart} ... ${insertTextEnd}`.replaceAll(
      /\s+/g,
      " "
    );

    element.innerText = insertText;
  });
}

truncateMiddleWithEllipsis();

window.addEventListener("resize", () => truncateMiddleWithEllipsis());

body {
  font-family: sans-serif;
  /* font-size: 50px; */
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app">
      <div
        class="truncateMiddle"
        data-text="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero voluptas
      quo similique nostrum quisquam itaque obcaecati aut quos? Blanditiis aut
      quae repellendus itaque optio! Doloribus et accusantium neque natus sit
      harum ea mollitia distinctio consequuntur, facilis molestiae, magnam
      maiores soluta commodi sed accusamus id ad molestias cum minus iure
      facere."
      ></div>

      <span
        class="truncateMiddle"
        data-text="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero voluptas
      quo similique nostrum quisquam itaque obcaecati aut quos? Blanditiis aut
      quae repellendus itaque optio! Doloribus et accusantium neque natus sit
      harum ea mollitia distinctio consequuntur, facilis molestiae, magnam
      maiores soluta commodi sed accusamus id ad molestias cum minus iure
      facere."
      >
      </span>
      <p
        class="truncateMiddle"
        data-text="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero voluptas
      quo similique nostrum quisquam itaque obcaecati aut quos? Blanditiis aut
      quae repellendus itaque optio! Doloribus et accusantium neque natus sit
      harum ea mollitia distinctio consequuntur, facilis molestiae, magnam
      maiores soluta commodi sed accusamus id ad molestias cum minus iure
      facere."
      ></p>
      <h1
        class="truncateMiddle"
        data-text="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero voluptas
      quo similique nostrum quisquam itaque obcaecati aut quos? Blanditiis aut
      quae repellendus itaque optio! Doloribus et accusantium neque natus sit
      harum ea mollitia distinctio consequuntur, facilis molestiae, magnam
      maiores soluta commodi sed accusamus id ad molestias cum minus iure
      facere."
      ></h1>
    </div>

    <script src="./index.mjs" type="module"></script>
  </body>
</html>

БЛОГ НА HUSL

Как повторить сокращение текста из дефолтного файлового инпута, на чистом js?

Ответы (0 шт):