За последние 24 часа нас посетили 68116 программистов и 5347 роботов. Сейчас ищут 1565 программистов ...

Оптимизировать код

Тема в разделе "JavaScript и AJAX", создана пользователем Zuldek199, 28 дек 2022.

  1. Zuldek199

    Zuldek199 Новичок

    С нами с:
    28 дек 2022
    Сообщения:
    1
    Симпатии:
    0
    HTML:
    1. <!doctype html>
    2. white-space: pre-wrap;
    3.   #text { max-width: 20%}
    4. <div id=text>
    5. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
    6. Praesentium nemo dolores debitis, maxime quia ipsum quasi
    7. officiis id libero tenetur autem similique iure itaque optio quis beatae minima! Libero, eaque!
    8. </div>
    9.  
    10.  
    11. const createLines = (el, l, lines = [], i = 0) => {
    12.  
    13.   const content = el.textContent.split("");
    14.   (clone = el.cloneNode(true)).innerHTML = "foo";
    15.   document.body.append(clone);
    16.   const oneLineHeight = clone.scrollHeight;
    17.   while (i < content.length) {
    18.  
    19.    let oneLine = clone.innerHTML = "";
    20.    while (i < content.length && clone.scrollHeight <= oneLineHeight)
    21.      clone.innerHTML = oneLine += content[i++];
    22.  
    23.    lines.push(content.splice(0, i == content.length ? i : oneLine.lastIndexOf(" ")).join(""));
    24.    i = 0;
    25.  }
    26.  clone.remove();
    27.  console.log(lines[l]);
    28. };
    29.  
    30. createLines(text, 2);
    31. window.onresize = _ => createLines(text, 2);
    Кто может выполнить проще, что нибудь убрать из кода, упростить. Сделать так, чтобы нагружала как можно меньше пользовательский процессор.

    В консоль выводит весь текст, что содержит необходимая строка. В данном случаи указываем 2, получаем текст из третей строчки.

    А задача в целом в том, чтобы узнать длину третьей строчки, не количество символов, а именно длину. В дальнейшем полученный текст оборачиваем в span, добавляем блок и получаем ширину строчки в px.