css white-space property in textarea?

Question

I want to use the white-space CSS property in an HTML textarea.

Basically if someone types a bunch of text with line breaks in a textarea, and then submits this data to be stored in MySQL, I want to use the white-space CSS property to display those line breaks in the textarea. But when I try it it's not working and just displays the text all together in one big paragraph, without any breaks or anything. Is there a way to do this?

<form action="includes/changebio.php" method="post" id="form1">         
 <textarea id="bio" style="width: 440px; 
    margin-top:3px;
    text-align:left;
    margin-left:-2px;
    height: 120px;
    resize: none; 
  outline:none;
  overflow:scroll;

  **white-space:pre-line;**

    border: #ccc 1px solid;" textarea name="bio" data-id="bio" maxlength="710" placeholder="<?php echo stripslashes($profile['bio']); ?>"></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>

What is this “it” that “displays the text all together in one big paragraph”? It sounds like your problem is in the *processing* of the submitted user input, not in the styling of a `textarea` element. The element, as shown in the sample code, has no content. — Jukka K. Korpela, Apr 16 '13 at 03:56

score 4 · Answer 1 · edited Apr 19 '14 at 18:08

textarea{white-space:pre}

When I've seen this, it's because your textarea is inheriting a white-space:nowrap from something. It can also be complicated by a wrap="no" on the textareas which can be useful sometimes.

The default behavior for a textarea nowrap is pre, so simply setting the css as above at the bottom of your styles will override anywhere that is setting the white-space.

If you inspect your textarea element, you'll most certainly find that somewhere in the hierarchy you're setting the nowrap property somewhere on some type of element that is overriding the default textarea behavior.

score 1 · Answer 2 · answered Apr 15 '13 at 23:36

1

Don't.

<textarea> elements already handle whitespace literally. There is no need to try and take things into your own hands.

answered Apr 15 '13 at 23:36

Niet the Dark Absol

320,036
81
464
592

so any idea why the text would be showing as one big paragraph without spaces? – Bear John Apr 15 '13 at 23:38
You're trying to override it and it doesn't work well. I don't know how the browser handles it, exactly, but "not correctly" just about sums it up. Just remove the `white-space` property altogether. – Niet the Dark Absol Apr 15 '13 at 23:39

score 0 · Answer 3 · edited May 23 '17 at 10:29

Things seem to be working ok for me... Tossed this into a codepen just to test it. Newline characters appear fine within the textarea when added directly.

Don't know what's going on. Is PHP stripping newline characters? Are you using double quotes around whatever you are passing in through $profile['bio']?

Here's an answer that might help you: The .val() of a textarea doesn't take new lines into account

The last response, in particular. Based on your code, it doesn't sound like the .replace() method is what you need (but I could be wrong... maybe I'm not understanding what you are doing).

score 0 · Answer 4 · answered Apr 08 '22 at 03:15

0

one line of jquery will solve the problem

$('#bio').text('');

or Javascript

document.getElementById("bio").innerText = '';

answered Apr 08 '22 at 03:15

Joukhar

724
1
3
18

css white-space property in textarea?

4 Answers4