Why is textarea filled with mysterious white spaces?
Look closely at your code. In it, there are already three line breaks, and a ton of white space before </textarea>. Remove those first so that there are no line breaks in between the tags any more. It might already do the trick.
How to remove extra space inside textarea
Its because your php tag is on a newline. It is reading in the whitespace from where <textarea> ends until php tag opens. Put this all on one line to fix.
Extra space under textarea, differs along browsers
Add vertical-align: top to textarea.
The reason for the gap is that textarea is an inline (or inline-block) element, and the gap is the space reserved for descenders in text. I don't know exactly why the gap is different between different browsers.
Where is the extra space coming from around this textarea?
Your textarea width is greater the the container: 100% + 2px of border + 2px left padding + 2px right padding
So used box-sizing: border-box; in textarea.
The box-sizing property allows us to include the padding and border in an element's total width and height.
.container { height: 200px; width: 500px; background: steelblue;}
textarea { resize: none; height: 100%; width: 100%; margin: 0; padding: 2px; /* textarea default padding */ border: 1px solid red; overflow: auto; -webkit-box-shadow: none; -moz-box-shadow: none; border-radius: 0; background: rgba(255, 255, 255, 0.5); box-sizing: border-box;}
textarea:focus,textarea:active { outline: none; padding: 0;}<div class="container"> <textarea></textarea></div>Remove white space from Text-Area , Why is it there?
The white space is generated by the way you have formatted your HTML:
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" >
</textarea>
This creates a space and newline in the textarea. Change your HTML to this:
<textarea style=width:500px; font-size:14px; height:60px;font-weight:bold;
name= "name" id="name" ></textarea>
EDIT
I can see that you have named your textarea name, which indicates to me that you might want to use a <input type="text"> instead, since textareas are for multiline text.
Textarea shows extra space while retrieving from database?
You're inserting a lot of white-space with your formatting. Try the following instead:
<textarea name="text" rows="9"><?php
echo trim( $fetchedData['founder_msg'] ); // trim, following comments
?></textarea>
textarea is inserting extra spaces if closing tag is on its own line
It's not that it's incorrect, but it's respecting the white space you're giving it at the outset.
That tag being on a new line doesn't exist in a vacuum. There are white-space characters between the close of the opening tag and the open of the closing tag.
Remove that, and you're set.
Example:
Without whitespace:
<textarea class="some-class">{{ my-textarea-value }}</textarea>
Output
my textarea value
With whitespace:
<textarea class="some-class">
{{ my-textarea-value }}
</textarea>
Output
my textarea value
Another option:
You can use this trick that I sometimes advocate to remove white-space for inline-block elements to get rid of your extra spaces and preserve readability:
<textarea class="some-class"><!--
-->{{my-textarea-value}}<!--
--></textarea>
The HTML comments will remove any extraneous white-space without requiring you to sacrifice the neatness of your markup.
extra spaces and newline PHP automatically get removed TEXTAREA
This is because new line characters are represented as \r\n, in the sourcecode you'll see new lines. Whitespaces get truncated if one follows another in HTML.
I suggest you to use the <pre> tag, which does not only save the new lines (like php's nl2br()) but also preserves the whitespaces.
Don't forget to strip characters that would allow code injection when printing input from unknown source.
Using <pre>:
<html>
<body>
<pre class="yourStyleForThisPreFormattedText">
Welcome <?php echo htmlentities($_POST["input"]); ?>
</pre>
</body>
</html>
Using special chars ( ) and PHP functions:
<html>
<body>
Welcome <?php $a = nl2br(str_replace(' ', ' ', htmlentities($_POST["input"])), true);
echo $a; ?>
</body>
</html>
Notice:
For HTML4 and HTML5 use nl2br($str, true);, for XHTML4 use nl2br($str); - the difference is in the output: <br> and <br />. See http://php.net/nl2br
Related Topics
Select Option Padding Not Working in Chrome
On Hover of Child, Change Background Color of Parent Container (Css Only)
Make Content Horizontally Scroll Inside a Div
How to Prevent Flex-Items from Overflowing Flex Parent With No Wrap
How to Get Angular to Reload the Same Page But With a Different Argument
Responsive Fullscreen Youtube Video With No Black Bars
Best Way to Create Video from Html5 Animation
Why Don't Flex Items Shrink Past Content Size
Position Absolute But Relative to Parent
How to Nest a ≪Button≫ Element Inside an ≪A≫ Using Html5
Simple Way to Display Data in a .Txt File on a Webpage
Force HTML Content to Fit in Device Width With Wkwebview
How to Properly Escape Quotes Inside HTML Attributes
Embed Pdf on a Webpage and Prevent Download
How to Give Multiple Conditions in *Ngif Statement in Angular 6
Where Is the Extra Space Coming from Around This Textarea