word wrapping for pree tag

Discussion in 'CSS' started by LOD, Sep 4, 2009.

  1. #1
    hi guys
    i am using pre tag for showing any comments that user makes.
    the parent div tag is set to width 950 px. however the pre tag is overflowing out of the parent div tag. now i dont want to use any scrolling. i just want want the comments to go to the next line automatically whenever its exceeds 950px.. now how can i achieve that..

    to be more specific i just want wordwrap for my pre tag at 950px..
    please let me know how is that possible..
    thanks in advance
     
    LOD, Sep 4, 2009 IP
  2. LOD

    LOD Member

    Messages:
    319
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    35
    #2
    any help guys????
     
    LOD, Sep 5, 2009 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Um, don't use <pre> for that? If your box is 950px wide, its content will naturally wrap as needed. If you think you just must use <pre>, tell use why you think so.

    cheers,

    gary
     
    kk5st, Sep 5, 2009 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Oh, yeah. Don't you realize this is the weekend? And, in the US, it's a holiday weekend (Monday). Wait for a second full work-day before bumping.

    gary
     
    kk5st, Sep 5, 2009 IP
  5. LOD

    LOD Member

    Messages:
    319
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    35
    #5
    i would be showing songs lyric from database.. so if i dont use pre tag the lyric doesnt maintain the line break that its supposed to... so i must use pre tag.. however, if i do use pre tag cerain line whice is too wide overflows out of the box... now i could use scroll.. but i dont want scroll. i want the line to wrap itself to the next line..

    any help is greatly appriciated...
     
    LOD, Sep 6, 2009 IP
  6. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Try this:
    
    pre {
     white-space: pre-wrap;       /* css-3 */
     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }
    
    Code (markup):
    Taken from here , it works but can't guarentee if it's the optimum method.

    Although you could just use nl2br function (PHP) to format the new lines of the text recieved from the database into HTML line breaks (<br />) and then not use the pre tag.
     
    wd_2k6, Sep 6, 2009 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    OK, poetry or verse; that's a good usage.

    I do wonder, though, how many song lyrics are going to have lines so long; that's about 120 characters at a 16px font size (variable spaced font). I would add the line-break myself, so that it occurs at a reasonable point.

    cheers,

    gary
     
    kk5st, Sep 6, 2009 IP
  8. LOD

    LOD Member

    Messages:
    319
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    35
    #8
    thanks dude... u r a lifesaver...
     
    LOD, Sep 6, 2009 IP