3

I've searched but I can't seem to find an answer on how to do this.

I'd like to be able to determine what text is hidden/invisible while using overflow: hidden in a div. I'm trying manage some pagination when the screen is printed.

In the (simplified) example below I'd like to be able to determine what text from div-1 isn't visible so it can be moved to div-2 via javascript or jQuery. 

// css
.divs {
    width: 250px; 
    overflow: hidden; 
    white-space: nowrap;
}


// html
<div class="divs" id="div-1">
    This is some text that I can see ... 
    but this text is not visible due to overflow: hidden
</div>

<div class="divs" id="div-2"></div>
Mr Glass
  • 1,186
  • 1
  • 6
  • 14
  • 2
    Without using some sort of convoluted method like wrapping each character in a `` and doing some crazy ninja positioning checks in Javascript, this isn't really possible. You might want to re-think your approach to the entire system here. – Aweary Mar 31 '15 at 18:36
  • @Aweary, Thanks for confirming my suspicions. – Mr Glass Mar 31 '15 at 19:45

1 Answers1

3

As far as I know, there is no method to determine which text is hidden, which text is shown. You may try to workaround like this: calculate width of text by multiply letter metric (width) with number of character. Then compare with div with, but it not always accurate.

PS: there is another solution here How to find the last visible word position in a text container?

Community
  • 1
  • 1
James
  • 13,571
  • 6
  • 61
  • 83