javascript - 如何使用自动换行来计算行数 : break-word?

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));

希望我没有错过任何事情。