Найти положение переполнения текста с использованием Javascript

Question

Как и для Determine if an HTML element's content overflows, как вы можете найти положение индекса элемента, который переполняется?

Пример: Если у нас есть длинная строка внутри div, которая переполняется на 100-й символ, как я могу найти эту позицию?

Редактировать: Подробнее, потому что @dfsq спросил: Я пытаюсь создать хороший текстовый читатель с перелистыванием страницы.

Answer 1

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

function find_overflow_index(elt, str) { 
    elt.textContent = ''; 

    for (var i=0; i < str.length; i++) { 
    elt.textContent += str[i]; 
    if (elt.scrollWidth < elt.offsetWidth) return i; 
    } 

    return -1; // no overflow 
} 

find_overflow_index(
    document.getElementById("foo"), 
    "Long string which might overflow");