Textarea "wrap=hard" not working for Firefox

Question

I have the following code:

<!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 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:85px; padding: 5px;"></textarea>
        <input type="submit" value = "Submit"/>
    </form>
</body>
</html>

where SCRIPT.php is as follows:

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

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

?>

The problem I am having is that line breaks aren't properly passed on in Firefox. When I type the following into the textarea (B denotes the character that causes the cursor to jump to the next line, N denotes the character that causes that word to jump to the next line):

ddddddddddBdd fff
ggg ggg ggNgg sss

i.e. the textarea looks like this:

+------------+
| dddddddddd |
| Bdd fff    |
| ggg ggg    |
| ggNgg sss  |
+------------+

Internet Explorer echoes it as:

ddddddddd
Bdd fff
ggg ggg
ggNgg sss

which is correct, with line breaks exactly where they were in the textarea.

However, Firefox echoes it as:

ddddddddddN fff
ggg ggg ggNgg sss

whether I use nl2br() or pre tags.

(I haven't tried any other browsers yet)

Could somebody please tell me why this is and how to make sure line breaks are properly passed on, regardless of the browser.

score 1 · Answer 1 · edited Jul 04 '11 at 07:38

1

In Firefox (at least from 3.6+), in order for auto-linebreaks to preserve, here's what you must do...

Of course, set wrap=hard
Do not use cols and rows attributes
Must specify CSS width and height
Do not specify CSS overflow at all (let Firefox determine it)

Tested this exact scenario and it seems to linebreak in correct locations.

edited Jul 04 '11 at 07:38

Yi Jiang

49,435
16
136
136

answered Jul 03 '11 at 19:33

mrF

11
1

1

The `cols` and `rows` attributes are required in XHTML. – MC Emperor Sep 16 '11 at 10:59

score 1 · Answer 2 · edited May 23 '17 at 11:59

It seems like Mozilla Firefox uses the cols attribute to break the text instead of the displayed width of the textarea. In XHTML, the cols and rows attributes are required. You should try to determine what the value of the cols attribute should be, but that's pretty difficult to do, because the width of a 'col' depends on the used font. You can use JavaScript to determine the font length.

On How to get the actual rendered font when it's not defined in CSS? the question how to do that is asked.

function getStyle(element, property) {
    return window.getComputedStyle(element, null).getPropertyValue(property);
}

You can get the font of an element (even if it's not defined through CSS!) and calculate the width of the text inside that element. So you can get the maximum text length drawn on a single line. Then you must set the cols attribute manually using JavaScript: textarea.setAttribute("cols", numberofcols). The column width is the average character width of a certain font.

score 0 · Answer 3 · answered Jan 27 '15 at 07:26

I've found that it will work if I just set the cols to a really high value.

Like cols=200 and since it is actually less than that it will properly do the line breaks.

I'm creating my textarea with jquery so it looks like this...

var textArea = $("<textarea/>", {
                        'name': 'marko',
                        'class': 'form-control',
                        'id': 'new-text-box',
                        'placeholder': 'Type your message...',
                        'autofocus': true,
                        'cols': 200,
                        'rows': 4
                    });

score 0 · Answer 4 · edited Apr 11 '13 at 09:14

0

Why don't you try

echo '<pre>';
echo "$pastwork";
echo '</pre>';`

? I know it's the same, but it might be worth the trouble.

edited Apr 11 '13 at 09:14

MC Emperor

22,334
15
80
130

answered Apr 06 '11 at 09:44

magicianiam

1,474
7
33
70

score 0 · Answer 5 · edited Mar 30 '20 at 20:13

From: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

wrap 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 also be specified for this to take effect.

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.

To preserve (automatically created) linefeeds without adding more you post with wrap="hard" and read content into wrap="soft"

Textarea "wrap=hard" not working for Firefox

5 Answers5