4

So I'm having a problem with some jQuery.

Basically, I need to create a function that will split a paragraph, when it becomes too large for a container. Half of it will remain in the current container, and the rest will drop down to the next.

Basically I want to go line by line through the text, testing the height of it and all lines above it. Is there a way to traverse through lines of a paragraph?

Also, on resize I will have this bound to a listener so that when the width changes, the content still remains the same height in each element.

I hope that all made sense!

Josh Darnell
  • 11,304
  • 9
  • 38
  • 66
Will Haynes
  • 758
  • 3
  • 8
  • 15
  • Can you give a little more information, such as how the text is being added into the container? A lot of this may be very dependent on how and when that content gets updated. – whoughton Apr 01 '11 at 01:17
  • this might help http://stackoverflow.com/questions/783899/how-can-i-count-text-lines-inside-an-dom-element-can-i – Michal Apr 01 '11 at 01:21
  • Whoops, for some reason I didn't get email alerts. To be honest, I haven't tried anything yet. My first idea, was to run a for loop, with a substring from (0,i) adding a word each time and create a "test" paragraph, that I could find the height of. Any thoughts on that? Would that make the content lag on resize? Was hoping someone might have a simple solution before I started fiddling. – Will Haynes Apr 02 '11 at 01:37

1 Answers1

1

I don't think you can go through "lines" in a paragraph, because what may visually seem like 10 lines could actually be only one wrapped line (no actual line breaks).

You could, for example, set the overflow to show on the container, and detect when the overflow happens with height/clientHeight, and then split the text by counting words or similar.

UPDATE:

Here is a demo: http://jsfiddle.net/AQwFM/4/

Obviously need improvements, but should get you started.

Daniel
  • 708
  • 4
  • 12
  • Thanks, that looks like what I'm going to have to do. Any idea if that would make the content lag on resize/load? – Will Haynes Apr 02 '11 at 01:43
  • Any `resize` handler will introduce unnecessary overhead, but it wouldn't lag any more than traversing through lines of a paragraph, even if that was possible :) You might want to take a look at [jQuery throttle](http://benalman.com/projects/jquery-throttle-debounce-plugin/) to reduce the number of `resize` calls. Happy to help – Daniel Apr 02 '11 at 01:58
  • Added a demo so you can see the performance etc. Resize the topmost box vertically until the content can't fit at which point content will split in half and be divided between the 2 boxes. – Daniel Apr 02 '11 at 03:20