Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS: Wrap on a per-paragraph basis?

    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

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,649
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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....
    Last edited by zoobie; 02-17-2004 at 05:30 AM.
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    "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.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well something like this would probably have that effect:
    Code:
    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 ..?
    Last edited by brothercake; 02-17-2004 at 09:56 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #10
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 :'(

  • #12
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #13
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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..

  • #14
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #15
    Banned
    Join Date
    Jan 2004
    Location
    Minneapolis, MN
    Posts
    387
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •