<textarea> to <pre>

[Mandes]

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

echo '<textarea name="freetext" rows="5" cols="100"></textarea>';

but the output text is being wordwraped at around 60 chars

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 ??

[AutisticCuckoo]

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).

[Mandes]

OK its part of a large page so I'm extracting elements here for you.

Firstly the form element.

<textarea name="freetext" rows="5" cols="100"></textarea>

This then goes to my PHP script that handles it as

$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

.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

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

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

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

[Mandes]

And heres the generated HTML of teh received email for that section.

........................
<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>
......................................

[Mandes]

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 ?

[AutisticCuckoo]

.printmultiemailtext {
width: 100%;
margin: 5px;
text-align: left;
border: 1px solid #ddd;
}

Not relevant to this matter, but width:100% plus margin:5px doesn't look right.

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.

[Mandes]

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

$message = wordwrap($mess, 65); 

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

[Mandes]

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.