CSS: Wrap on a per-paragraph basis?

[AaronW]

I'm looking for an easy way to wrap a bunch of text on a per-paragraph basis as opposed to a per-line basis which is the default method...

To illustrate my problem:

http://www.classicalchicago.com/RichWharton/

Notice that the page owner has tried to toss in my periods to prevent his content from wrapping so awkwardly before the beginning the next paragraph. Personally, I don't mind the wrapping thing... But my client wants it to wrap only every paragraph. Meaning that all lines of a paragraph should follow the same margin as the first line of the pargraph. If wrapping needs to occur, it can only occur on the proceeding paragraph.

Another example: http://www.classicalchicago.com/okatkova/

The last line of her paragraph is wrapped. Since the first line wasn't, none of the others should either.

Is this doable with CSS alone? Otherwise, can anyone think up another method?

Thanks a bunch

Aaron

[zoobie]

Wrap? What exactly do you want to wrap? You can do much better than what you have...but you'd probably have to rebuild the whole page.
Client? hmm....

[AaronW]

"Client? hmm...."

?

Suggesting that because it's a client I shouldn't be asking for help? Not sure what that was insinuating...

Anyway... What I want to wrap is the paragraphs, not the text of the paragraph. I want the paragraphs to behave like lines of text... I think If I replace the <p> tags with <div> tags, all will fall into place... Am going to tinker now.

[brothercake]

If you do that though, they'll no longer be paragraphs - the loss of semantics would not be good.

Can't you just constrain the text into columns?

[AaronW]

Err, how would columns work though? There's not a lot of space to work with there.

I could fix the text along the one column it starts in, but then I'd have a lot of wasted space under the picture and repertoire and whatnot.

Is there no way to style those <p> tags in CSS to get the paragrahs to stay rectangular?

[brothercake]

Well something like this would probably have that effect:

p { display:table-cell; }

But it's poorly supported cross browser - just mozilla and Opera I think.

What if you wrap the <p> inside another <div> - like you suggested, but keeping the semantics as well - that might work ..?

[coder_seth]

another idea is to try to "massage" the paragraph content so that they just happen to end up looking like they wrap by the paragraph. i.e. getting the paragraph to end just as that float ends, and then starting a new one, perhaps with a clear: value just to be sure. and if the preceeding one is close enough, it probably wouldn't look too fishy.

[AaronW]

Well that's what I meant... I didn't intend to replace the <p> with <div>, but rather <div><p></p></div>

Though I did say replace... Hehe.

Will try that.

[brothercake]

Originally posted by coder_seth
another idea is to try to "massage" the paragraph content so that they just happen to end up looking like they wrap by the paragraph.

That assumes a constant text size - if the output size varies from what you saw when you tweaked it, the breaks will come in different places relative to box on the left. It's the same reason why <br> tags are not good for formatting text.

[coder_seth]

yes, of course. but i'm talking about editing the content itself so that you would have close to identical blocks of text with regard to their length. changing wording, stripping information if you can, etc. to achieve a block of text that just happens to appear to format the way you are describing. obviously, this is not ideal, but if presentation is so important to them, then perhaps they would be willing to adjust the text.

[AaronW]

Alright, I've got the paragraphs surrounded by <div> tags, but nothing changed :S The picture and whatnot are floated to the left, and the paragraphs' DIVs are expanding under the picture. Any ideas on how structure it so the picture is still floated there, but the DIVs will wrap around it, rather than stretch under it?

Bloody annoying. CSS should make this easy :'(

[AaronW]

Aha! I know it's a hideous hack, but the site's not exactly XHTML Strict in the first place... I stuck all the paragraphs in a single-celled table and voila

[coder_seth]

that's not a hack, it's just not semantical. it's basically a universally supported equivalent of the CSS display option suggested earlier, i believe..

[AaronW]

Well it's hack as in it's just a messy fix :P

And it's not the same as displaying the paragraphs as table-cells. Displaying them as tables would be the same. Table cells would stack up side to side like columns in a news paper.

[coder_seth]

i see, i see. i wasn't familiar with that property, i just made an assumption based on the name. either way, what you are doing is not a hack in any sense.