Как считать строки, используя перенос слов: брейк-слово?

Question

Можно ли узнать, сколько строк внутри div без разрывов строк, но только "word-wrap: break-word"?

Как узнать общее количество строк внутри этого div ?

<div id="content_text" style="word-wrap: break-word; background: red; color: white; width: 100px;">dsadasdasdsadasdasdsadasdasdsadasdasdsadasdas</div>

Answer 1

Вы можете создать копию элемента, поместить туда только один символ и получить высоту, равную высоте одной строки:

function getLineHeight(element) {
    const copy = element.cloneNode();
    copy.style.visibility = 'hidden';
    copy.style.position = 'absolute';
    copy.textContent = 'a';
    element.parentNode.appendChild(copy);

    const lineHeight = copy.offsetHeight;

    lineHeight.remove();

    return lineHeight;
}

Затем вы можете получить количество строк следующим образом:

const linesCount = Math.round(element.offsetHeight / getLineHeight(element));

Надеюсь, я ничего не пропустил.