CODEWITHSUNDEEP
javascriptjquerycss
Zak
Zak

Reputation: 2698

jQuery "crop" div

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. "cropped div"

I hope this is clear. Any suggestions?

Upvotes: 3

Views: 2558

Answers (3)

Hristo
Hristo

Reputation: 46477

Check out this fiddle... http://jsfiddle.net/UnsungHero97/Zeg3z/4/

The #wrapper div will control the cropping with overflow-x: hidden; it won't display content outside of its width. The #text div will contain the actual text and if you specify a width for this container, then the lines will not change as the #wrapper div expands.

I hope this helps.
Hristo

Upvotes: 1

Talljoe
Talljoe

Reputation: 14827

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/

Upvotes: 4

Alec
Alec

Reputation: 9078

You're probably looking for the white-space CSS property with the nowrap option.

Example: http://jsfiddle.net/532H8/

Adjust the width to see more or less of the text.

Upvotes: 1

Related Questions