Question

Suppose we have the following code:

<div id="test" style="width:200px; height: 200px; overflow: hidden;">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus 
   ipsum diam, cursus ornare eleifend quis, posuere id sapien. Vestibulum
   et mattis augue. Nulla facilisi. Sed rhoncus facilisis commodo. Sed mattis 
   commodo lorem, quis varius est facilisis eget. Integer at nunc metus. 
   Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>

   <p>Consectetur adipiscing elit. Vivamus lorem ipsum dolor sit amet, 
   ipsum diam, cursus ornare eleifend quis, posuere id sapien. Vestibulum
   et mattis augue. Nulla facilisi. Sed rhoncus facilisis commodo. Sed mattis 
   commodo lorem, quis varius est facilisis eget. Integer at nunc metus. 
   Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>

   <p>Sed rhoncus facilisis commodo. Sed mattis lorem ipsum dolor sit amet, 
   consectetur adipiscing elit. Vivamus ipsum diam, cursus ornare eleifend 
   quis, posuere id sapien. Vestibulum et mattis augue. Nulla facilisi. 
   commodo lorem, quis varius est facilisis eget. Integer at nunc metus. 
   Fusce augue odio, elementum et hendrerit vitae, malesuada at urna.</p>
</div>

The result would be a clipped text.

Is there some way to get invisible text as a substring?

I tried

$("#test :hidden").text();

and

$('#test').children(":hidden").text()

without success.

I’m trying to show pages of text without scrolling. I have a large amount of text (html formatted) and a fixed size div (the text page). I would like to paginate the text on it, just showing one page of text each time.

Answer 1

There is a good answer on this topic already, it provides the javascript you’d need to do this. Like the respondent there though, I would say find another way to do this if you can.