Textarea "wrap=hard" not giving linebreaks

RLJ · March 2, 2011

Hi all, I have the following textarea:

<html><body>
<form action=SCRIPT.php method=POST>
<textarea name="pastwork" id="pastwork" rows="6" wrap="hard" style="border: 1px solid #808080; width:480px; padding: 5px;"></textarea>
<input type="submit" value = "Submit">
</form></body></html>

The problem I am having is that, although the textarea is set to "wrap=hard", when I later echo $pastwork in SCRIPT.php there are no linebreaks where the text has reached the edge of the textarea and has gone onto the next line.

Any ideas? Thanks!

Pikachu2000 · March 2, 2011

How are you echoing it? Are you using nl2br(), or echoing it within <pre></pre> tags?

RLJ · March 17, 2011

I've tried echoing it as is, with nl2br() and with <pre> tags, nothing seems to work.

SCRIPT.php is as follows:

<?php
$pastwork = $_POST['pastwork'];

echo $pastwork;
echo "<br />";
echo "<pre>". $pastwork."</pre>";
echo "<br />";
echo nl2br($pastwork);
?>

If I type the following into the textbox (N denotes where it goes onto a new line):

gggggggggggggggNNNNNNN

it echoes as:

gggggggggggggggNNNNNNN

instead of:

ggggggggggggggg

NNNNNNN

and if I type (N denotes the character that causes the word to go to the next line):

ffffff fffff fffffff fff ff fffffff fff fffffff fff ffffffNgg

it ehoes as:

ffffff fffff fffffff

fff ff fffffff fff

fffffff fff

ffffffNgg

instead of:

ffffff fffff fffffff fff ff fffffff fff fffffff fff

ffffffNgg

So basically I want the variable $pastwork to contain text exactly as displayed in the textbox. (this then gets sent to a database)

How do I do this? Thanks!

cssfreakie · March 17, 2011

maybe try:

white-space:nowrap;

or

white-space:pre-wrap;

RLJ · March 17, 2011

Nope, no luck.

SCRIPT.php is now as follows:

<html>
<head>
<style type="text/css">
{
white-space:pre-wrap;
}
</style>
</head>

<body>
<?php
$pastwork = $_POST['pastwork'];

echo $pastwork;
echo "<br />";
echo "<pre>". $pastwork."</pre>";
echo "<br />";
echo nl2br($pastwork);

?>
</body>
</html>

Have I used the white-space CSS correctly? Any other ideas?

cssfreakie · March 17, 2011

you used it wrong, maybe read some about selectors, ID's and classes, pretty vital for working with css.

Anyways this works:

I changed your $_POST var to a string with new lines

<html>
<head>
<style type="text/css">

pre{white-space:pre-wrap;}

</style>
</head>

<body>
<?php
$pastwork = "lalalalalalalalalalalalal lalalalala
    lalalalala alalalalala
    alalalalala alalalalala";

echo $pastwork;
echo "<br />";
echo "<pre>". $pastwork."</pre>";
echo "<br />";
echo nl2br($pastwork);

?>
</body>
</html>

this outputs:

lalalalalalalalalalalalal lalalalala lalalalala alalalalala alalalalala alalalalala

lalalalalalalalalalalalal lalalalala

lalalalala alalalalala

alalalalala alalalalala

lalalalalalalalalalalalal lalalalala

lalalalala alalalalala

alalalalala alalalalala

RLJ · March 17, 2011

OK thanks for your help, however, it's not solved the problem.

All I want to do is make sure that line breaks get passed through as they appear in the text box. So I don't mind about indents, etc. I.e. in your modified SCRIPT.php the nl2br function gives the desired output already (nothing to do with the CSS formatting of pre tags).

The reason it is now giving the desired output is because you now define $pastwork in the same script. However, if $pastwork is posted from the textarea, the problem remains.

So it seems like maybe the problem is that newline characters aren't properly posted on to SCRIPT.php from the textarea?

Pls help!

cssfreakie · March 17, 2011

So in other words my script example works but yours doesn't right?

well i just adjusted your code for a use full string to work with since i have no idea what your post vars are.

as far as the white-space have a look here: http://www.w3.org/TR/CSS2/text.html#white-space-prop

There are some differences and you just choose one out of 4.

as far as the way you code gets processed, that is more a php or html.

Could you maybe post the complete 2 codes. (complete as in complete) than i can have a look what is going on.

RLJ · March 17, 2011

OK. the code is complete, see my first post for the code that contains the textarea and my 2nd post for the code that contains the PHP. You can literally copy and paste and run on your computer and (hopefully) you will encounter the same problem as I do.

thanks.

cssfreakie · March 18, 2011

well if that is the case your form, is missing <head> tags.

Now I am happy to help, but I rather work with exactly what you have. IF the above is that, I would say read a bit about webpages, because you are missing quite some things. NOt only a <head> also a doctype a title etc.

RLJ · March 18, 2011

cssfreakie, I really appreciate your help, but we seem to be drifting off subject a little bit...

I could post my entire code, but it is several pages long and would only serve to distract anyone reading this post from the actual problem at hand.

Now if you take the code exactly as I have posted it, the problem still remains that somehow linebreaks (seemingly) are not properly posted from the textarea to SCRIPT.php. I.e. I have narrowed down the problem to an issue within the code that I have posted, it does not make any sense to post my entire code.

So anyway, thanks again and if you or someone else can spot the problem, it would be much appreciated!

RLJ · March 18, 2011

Update: the problem is only with Firefox. Internet Explorer works fine. Haven't tried any other browsers.

Can someone explain why this is? How do I make sure it works on Firefox (and others) as well?

Thanks!

cssfreakie · March 18, 2011

Although you might think i am drifting away, the script you provided is missing stuff (like doctype <head> etc). I don't feel like debugging stuff that is invalid from the start. I hope you understand that, because if vital stuff is missing, you never know what the result of that omission will be. if you don't believe me, google, what happens if you don't have a doctype for instance.

Just take the advice and use it. If stuff is displayed differently in several browsers, either your css sucks or your html. Now i think i pointed out that your html is so fixed that and try again.

RLJ · March 18, 2011

the script containing the textarea is now as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="RLJ" />

<title>Untitled 2</title>
</head>

<body>

<form action=SCRIPT.php method=POST>
<textarea name="pastwork" id="pastwork" rows="6" wrap="hard" style="border: 1px solid #808080; width:480px; padding: 5px;"></textarea>
<input type="submit" value = "Submit"/>

</body>
</html>

Surprise, surprise, it didn't fix the problem...... Anyone with some USEFUL advice pls? Instead of just a bruised ego.....

cssfreakie · March 18, 2011

RLJ,

your stubbornness shows clearly you lack in trusting someone else in the advice they give.

your html is as incorrect as hell. Now you may think my ego is bruised, but it's not or that my way of writing is of someone with a big ego but I am only trying to help your ignorant ass. And pretty much everything i said above is helpful. But you probably don't know, because that's why you are here..... asking for help. Now i don't pretend to know everything in fact i don't but i do now the following:

look at your form:

<form action=SCRIPT.php method=POST>
<textarea name="pastwork" id="pastwork" rows="6" wrap="hard" style="border: 1px solid #808080; width:480px; padding: 5px;"></textarea>
<input type="submit" value = "Submit"/>

This is what it should look like:

<form action="SCRIPT.php" method="post">
<textarea name="pastwork" id="pastwork" cols="20" rows="6" style="white-space: pre-wrap; border: 1px solid #808080; width:480px; padding: 5px;"></textarea>
<input type="submit" value = "Submit" name="submit" />
</form>

now you don't have to thank me, because you wont mean it nor do I give a crap. But next time someone tells you what your missing, maybe think again, before saying something stupid.

Have fun, i suppose you can solve this riddle yourself!

RLJ · March 18, 2011

.....

Do you even test your own code before you post it?? You've succesfully stopped it from working on Internet Explorer as well as Firefox now...... Probably because you removed "wrap=hard"....

Now I'm really not trying to act superior or put you down or anything, but unless you have something useful to add, you're kinda spamming and wasting everyone's time..... not only my time, but also other people's time who might be reading this with a similar problem.

I think it's great that you know so much about CSS/HTML and I will take your advice to heart, really I will. However, nothing you have posted so far is contributing towards finding a solution....

RLJ · March 19, 2011

So as you may know, the "wrap=hard" attribute of a textarea is not properly implemented in Firefox (some people would call it a bug).

Text wraps as it should do when typing several words, but not when typing a continuous string.

E.g. if one types:

111 2222 33 44N44 555

where N denotes the last character that fits on the same line, and you later echo this input with nl2br, it echoes as:

111 2222 33

44N44 555

as expected.

But if one types:

888888888888N8888888

it echoes as:

888888888888N8888888

instead of:

888888888888N

8888888

as (I think) it should do (as in IE).

Could someone pls propose a good workaround for this? So that textarea input echoes exactly as it appears when typing it in the textarea, with breaks in the right places.

I'm thinking of something along the lines of inserting a after x characters, if a string contains a word that is longer than x characters, but I am unsure of how to do this and maybe someone has a better solution.

Pls help! Thanks!

Pikachu2000 · March 19, 2011

wrap="hard" isn't even valid as an html attribute as far as I can tell, so I don't see how it could be considered a bug.

RLJ · March 19, 2011

Some additional info on this problem:

http://www.w3schools.com/html5/tag_textarea.asp

https://bugzilla.mozilla.org/show_bug.cgi?id=95067

KevinM1 · March 19, 2011

You're trying to use an HTML5 attribute, which may or may not be fully supported in modern browsers, and may or may not be implemented the same way in the browsers which may support it. Try sticking with HTML 4.

Pikachu2000 · March 19, 2011

The bug report isn't related to <textarea> wrapping, it's in regards to wrapping long words at the edge of the browser window.

It appears that wrap="hard" is an HTML5-only attribute. Have you tried adding a proper !DOCTYPE declaration to the markup?

:
wrap (HTML5)

Indicates how the control wraps text. Possible values are:

* hard: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the cols attribute must be specified.

* soft: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.

See if any of that fixes it.

RLJ · March 20, 2011

Hi guys, thanks for the replies.

Am I correct in thinking that for HTML5 the !DOCTYPE declaration is simply: "<!DOCTYPE html>" ?

I have tried adding this, as well specifying the "cols" attribute, but without success.

Right now though, I am focusing on a workaround using PHP. Perhaps by inserting " " into the string that has been submitted from the textarea, after x characters from the previous " ", for every instance of a substring containing more than x characters.

So what I want to do is the following: say the user submits the following string (N are characters that appear on the next line in the textarea):

ddd fff ggg

ssssssssssNNNN

wwww dd

then I first use nl2br() to convert this into:

ddd fff ggg ssssssssssNNNN wwww dd

and then I need some more PHP to convert this into:

ddd fff ggg ssssssssss NNNN wwww dd

So hopefully thats kinda clear. How do I do this?! Any help will be much appreciated!

thanks.

Sign In

Textarea "wrap=hard" not giving linebreaks

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information