jQuery "crop" div

Question

I hope I'm not repeating - it doesn't seem like there are any questions that have the same specifications as mine.

I'm looking for a way to "crop" a div with jQuery. The div is going to start with a width of zero, and then get animated to its full length. The tricky part is I want any text that overflows on the side to be hidden, rather than just pushed down to fill the space.

It doesn't seem like the regular "overflow: hidden" will work because I could have many lines of text, and I want each line to be "cropped", so the characters for the individual line are hidden instead of being bumped down to the next line.

I hope this is clear. Any suggestions?

Answer 1

You'll need to use nested elements and CSS:

<div id="content">
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <p>Paragraph 3</p>
</div>

In CSS you'll want to set the p elements's width to the full amount and set overflow to wrap. You'll then want the div element to have overflow hidden and animate that element's width.

p { width: 300px; margin-top: 18px; }
#content { overflow: hidden; width: 50px; }

If you won't want the extra div in your markup you can create the wrapper div in jQuery and put the paragraphs inside it when it comes time to animate.

Fiddle: http://jsfiddle.net/XsLAT/