SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    <textarea> to <pre>

    HI all

    Having problems this end.

    Ive a textarea on a form that users type a message into. This is then passed to another page where I want to display the message, formatted exactly as the user input it.

    No problem I thought I'll use <pre> tags within a <div> to position the text, but for some reason the <pre> tag is cutting short (wordwraping) all my lines of text, the textarea box I enter the message into is 100 cols wide

    HTML Code:
    echo '<textarea name="freetext" rows="5" cols="100"></textarea>';
    but the output text is being wordwraped at around 60 chars

    Code:
    hjhsjdhfjkhsd jdh jhjk  jh sf kjfkjdfkjsfjdfkjsd fjk  kj
    kjshfjks skdjfsjk skdjh sdkfj sdkjsf ksjd ksdj skdjf ksjd ksjd
    ksdj ksjd skdjkjsdfjsf skdjfsjd skdjfskjdf skdjfskjf skjdfsk
    fhskj ksjdskd skdjfskjdh skdjfskj fhskjdh skdj sdjkfs kdfhksjf
    Any clues as to how i can do this ??
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A PRE element shouldn't word-wrap anything. Can you provide link to the page? Or at least post the generated HTML and CSS (not the PHP).
    Birnam wood is come to Dunsinane

  3. #3
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK its part of a large page so I'm extracting elements here for you.

    Firstly the form element.

    HTML Code:
    <textarea name="freetext" rows="5" cols="100"></textarea>
    This then goes to my PHP script that handles it as

    PHP Code:
    $mess .= '<div class="printmultiemailtext"><pre>' $_POST['freetext'] . '</pre></div>'
    basically I'm building a variable image of a page that gets emailed to a client the HTML image is held in $mess

    and the CSS that formats the div

    Code:
    .printmultiemailtext {
    width: 100%;
    margin: 5px;
    text-align: left;
    border: 1px solid #ddd;
    }
    the border was inserted to ensure that I was not wordwraping because the div was ending, its not the div is a full 700px wide.

    Ive also tried CSS styling the <pre> tag

    Code:
    pre {
    font-family:Palatino Linotype, sans-serif; 
    font-size: 13px;
    white-space: pre-wrap; 
    width: 600px;
    }
    Which effectively changes the font, but does nothing to cure the problem of the wrap

    When I enter the text in the textarea

    Code:
    This is a long line that should not break in the output until it gets to, wait for it, wait for it here. Newline after this. 
     
    This is a long line that should not break in the output until it gets to, wait for it, wait for it here. Newline after this.
     
    This is a long line that should not break in the output until it gets to, wait for it, wait for it here. Newline after this.
    The results I get are

    Code:
    This is a
    long line that should not break in the output until it gets to,
    wait for it, wait for it here. Newline after this.
     
    This is a long line that should not break in the output until it
    gets to, wait for it, wait for it here. Newline after this.
     
     
    This is a long line that should not break in the output until it
    gets to, wait for it, wait for it here. Newline after this.
    Thanks for any ideas
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  4. #4
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    And heres the generated HTML of teh received email for that section.

    Code:
    ........................
    <div class="clear"></div><div id="header"> 
     <img class="logo"
    src="http://www.myproperty.com/logo/logostretch.gif"
    title="Logo" alt="Logo" /> 
     
        <div class="details">
      Sent:- Thursday February 08, 2007</div></div><div
    class="page"><div class="printmultiemailtext"><pre>This is a
    long line that should not break in the output until it gets to,
    wait for it, wait for it here. Newline after this.
     
    This is a long line that should not break in the output until it
    gets to, wait for it, wait for it here. Newline after this.
     
    This is a long line that should not break in the output until it
    gets to, wait for it, wait for it here. Newline after this.
    </pre></div>
    ......................................
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  5. #5
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hang on, its not the <pre> tag at all is it, the HTML has been reformated the <pre> is just outputting exactly the layout of the HTML.

    So why would the HTML be split like this ?
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mandes View Post
    Code:
    .printmultiemailtext {
    width: 100&#37;;
    margin: 5px;
    text-align: left;
    border: 1px solid #ddd;
    }
    Not relevant to this matter, but width:100% plus margin:5px doesn't look right.

    Quote Originally Posted by Mandes View Post
    Code:
    pre {
    font-family:Palatino Linotype, sans-serif; 
    font-size: 13px;
    white-space: pre-wrap; 
    width: 600px;
    }
    There's your problem right there: white-space&#58;pre-wrap. Of course it will wrap. If you don't want wrapping, use white-space&#58;pre or omit the property altogether.
    Birnam wood is come to Dunsinane

  7. #7
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mandes View Post
    So why would the HTML be split like this ?
    Talking to myself now........... thats not good is it ?

    Anyway the reason is because the mail function has to have the message string cut into managable chunks, so way way down the script is a line

    PHP Code:
    $message wordwrap($mess65); 
    hence the reformatting of the HTML, hence the loss of format in the output.

    Guess I need to find a way round this line length problem for mail().

    Thanks for your time cuckoo
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming

  8. #8
    Who turned the lights out !! Mandes's Avatar
    Join Date
    May 2005
    Location
    S.W. France
    Posts
    2,496
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Not relevant to this matter, but width:100% plus margin:5px doesn't look right.


    There's your problem right there: white-spacere-wrap. Of course it will wrap. If you don't want wrapping, use white-spacere or omit the property altogether.

    Yep agree with the top one.

    The bottom comment, I put in the whitespace to try and cure the problem but it made no difference, but I think I know where the problem is now, see other post, thanks again.
    A Little Knowledge Is A Very Dangerous Thing.......
    That Makes Me A Lethal Weapon !!!!!!!!

    Contract PHP Programming


Bookmarks

Posting Permissions

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