HTML textarea text wrapping
Learn how to turn text wrapping on and off for HTML textarea to make the text either stay on one single line or wrap to the next line.
HTML textarea text wrapping
Text areas are a great way of providing visitors with a way to input even more information into a form. Unlike a normal text box the HTML textarea tag lets the user enter text on multiple lines allowing them to enter a lot more than they normally could.
Since HTML text areas have multiple lines it means that by default, when you type a sentence which is longer than the width of the box it will drop down a line and carry on there. This, in most situations is just fine however what if you wanted to stop this from happening? What if you wanted to keep a line of text on, well, just one line.
There is a little extra attribute you can add to the textarea tag which will wrap the text in a certain way. This attruibute is called ‘wrap’.
Here’s what it looks like by default. The textarea depicted below contains a sentence typed into one line and then a long web address typed into the next. Since both of these are longer than the textarea width it ends up taking up 4 lines.
To stop this from happening we use the ‘wrap’ attribute on the textarea tag. The code looks like this.
<textarea cols="30" rows="5" wrap="off"></textarea>
Using the above code and the exact same text inside the textarea we end up with this.
Notice how the text is on just two lines and a scrollbar at the bottom is there to let you scroll across. It’s that easy!