Find position of text overflow using Javascript

Question

Similar to Determine if an HTML element's content overflows, how can you find the index position of the element that overflows?

Example: If we have a long string inside a div that overflows at the 100th character, how can I find that position?

Edit: More detail because @dfsq asked: I'm trying to create a nice plain text reader, with page flipping.

You can find it, yes. Might be verbose, but possible. The real question is why you need it, because probably there is better and simpler way to solve your task. — dfsq
– dfsq, Commented Nov 1, 2015 at 11:53

score 2 · Accepted Answer · 2015-11-01 12:36:19Z

2

Here is some sample code. You will need to start off with zero characters, then add each character in one by one and detect when the offsetWidth exceeds the 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");

edited Nov 1, 2015 at 12:36

answered Nov 1, 2015 at 12:30

user663031

Sign up to request clarification or add additional context in comments.

1 Comment

Jared Smith Over a year ago

Clever answer, but would it not be better to split on spaces and loop through the resulting array adding words? Fewer iterations, fewer DOM manipulations, and wouldn't page-flip in the middle of a word. Might also want to mention that this should be added to the browser's resize event also so the pagination gets recalculated when the user resizes.

Collectives™ on Stack Overflow

Find position of text overflow using Javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related