I found a way to make a textarea with all this working at the same time:
- With horizontal scrollbar
- Supporting multiline text
- Text not wrapping
It works well on:
- Chrome 15.0.874.120
- Firefox 7.0.1
- Opera 11.52 (1100)
- Safari 5.1 (7534.50)
- IE 8.0.6001.18702
Let me explain how i get to that: I was using Chrome inspector integrated tool and I saw values on CSS styles, so I try these values, instead of normal ones… trial & errors till I got it reduced to minimum and here it is for anyone that wants it.
In the CSS section I used just this for Chrome, Firefox, Opera and Safari:
textarea {
white-space:nowrap;
overflow:scroll;
}
In the CSS section I used just this for IE:
textarea {
overflow:scroll;
}
It was a bit tricky, but there is the CSS.
An (x)HTML tag like this:
<textarea id="myTextarea" rows="10" cols="15"></textarea>
And at the end of the <head> section a JavaScript like this:
window.onload=function(){
document.getElementById("myTextarea").wrap='off';
}
The JavaScript is for making the W3C validator passing XHTML 1.1 Strict, since the wrap attribute is not official and thus cannot be an (x)HTML tag directly, but most browsers handle it, so after loading the page it sets that attribute.
Hope this can be tested on more browsers and versions and help someone to improve it and makes it fully cross-browser for all versions.
It seems that word wrapping no longer works for textarea elements in IE 11. In IE 10 and earlier, FF, Safari, and Chrome word wrapping works as expected.
IE 11 is not implementing any word wrapping. I have tried adding «wrap=hard» to the textarea tag and also adding «word-wrap: normal;» to the CSS.
Has anyone else encountered this problem? If so, have you found a solution. Windows is pushing out this update and the inconsistent behavior is becoming a problem.
Thanks for any help you can provide.
Here is my current textarea tag
<textarea class="wrklst-report_text" id="report_text_6586427" name="report_text[6586427]" title="Report Box" data-exam_seq="6586427" style="width:95%;"></textarea>
This is my computed CSS
-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: solid;
border-bottom-width: 1px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 1px;
color: rgb(0, 0, 0);
cursor: auto;
display: inline-block;
flex-direction: column;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
height: 300px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
resize: both;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
white-space: pre-wrap;
width: 950px;
word-spacing: 0px;
word-wrap: break-word;
writing-mode: lr-tb;
How can I prevent word wrapping in a textarea? In the example below, the textarea should only contain three lines. You should have to scroll to the right to see all the content.
<!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">
<head>
<title>Demo</title>
<style type="text/css">
textarea {
width: 400px;
height: 400px;
display: block;
margin: 0 auto 0 auto;
overflow: scroll;
}
</style>
</head>
<body>
<div>
<textarea cols="10" rows="0" readonly="readonly" wrap="sosft">Line 1
Line 2 In hac habitasse platea dictumst. Nulla ligula nibh, suscipit faucibus tristique id, pharetra adipiscing erat. Mauris a quam risus. Suspendisse et elit lectus. Suspendisse potenti. Vestibulum eu magna ut nunc dictum aliquet eu vitae lorem. Proin interdum, nisl at egestas semper, felis felis tincidunt magna, vel vehicula est magna a metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum mollis iaculis arcu et tempor. Proin placerat hendrerit felis et ultrices. Pellentesque posuere, ligula sit amet egestas accumsan, erat purus adipiscing neque, sit amet feugiat dui mauris ut enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum pharetra urna non commodo.
Line 3
</textarea>
</div>
</body>
</html>
Open in new window
Loading
An HTML textarea is an oversized Text Field capable of capturing «blurb» type information from a user. If you’ve ever posted on a forum or left feedback on your favorite blog, you probably do so using an HTML textarea.
Embed textareas in HTML documents using the <textarea> tag. Any text placed between the opening and closing textarea tags will be rendered inside the textarea element as the «default» text. This makes for a great way to give users an example or description of how to go about filling out the text area field. Something like, «Please limit your response to 100 characters,» would be an ideal description.
HTML Textarea Code:
<textarea name="myTextArea"cols="20" rows="10">Please limit your response to 100 characters.</textarea><br /> <textarea name="myTextArea" cols="40" rows="2">Please limit your response to 200 characters.</textarea><br /> <textarea name="myTextArea" cols="45" rows="5">Please limit your response to 500 characters.</textarea><br />
HTML Textarea Form Element:
As you may have noticed, the attributes cols (columns) and rows control the rendered size of the textarea. These constraints only impact how the textarea is rendered visually, and in no way do they limit the maximum number of characters a user can place inside the textarea. In fact, if you fill up the fields above with text, the fields will just continue to grow as you type and you will be able to scroll up and down as you please. Limits must be set with JavaScript and/or a server-side scripting language such as PHP.
HTML — Textarea Wrap
The wrap attribute refers to how the user input reacts when it reaches the end of each row in the text field. Wrapping can be defined using one of three values:
- soft
- hard
- off
«Soft» forces the words to wrap once inside the textarea but once the form is submitted, the words will no longer appear as such, and line breaks and spacing are not maintained.
«Hard» wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted the text will transfer as it appears in the field, including line breaks and spacing.
«Off» sets a textarea to ignore all wrapping and places the text into one ongoing line.
HTML Text Area Word Wrap Code:
<textarea cols="20" rows="5" wrap="hard">
As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read and preserves line breaks.
</textarea>
HTML Text Area Word Wrap:
Here’s a textarea with no word wrapping at all!
HTML Text Area No Word Wrap:
<textarea cols="20" rows="5" wrap="off">
As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read. </textarea>
HTML Text Area No Word Wrap:
HTML — Text Areas: Readonly
Setting a «yes» or «no» value for the readonly attribute determines whether or not a viewer has permission to manipulate the text inside the text field.
HTML Readonly Attribute:
<textarea cols="20" rows="5" wrap="hard" readonly="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read. </textarea>
HTML Read Only Text Areas:
This read-only behavior allows a web surfer to see and highlight the text inside the element, but he or she cannot alter it in any way. When highlighted, the user may also Copy (Ctrl + C on a PC, Ctrl-Click on a Mac) the text to local clipboard and paste it anywhere he/she pleases.
HTML — Text Areas: Disabled
Disabling the textarea altogether prevents the surfer from highlighting, copying, or modifying the field in any way. To accomplish this, set the disabled property to «yes».
HTML Code:
<textarea cols="20" rows="5" wrap="hard" disabled="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.
</textarea>
Disabled Textareas:
Keep in mind that just because users are unable to copy from the screen directly doesn’t prevent them from taking a screen capture or extracting the data from the source code. Disabling the textarea offers no security whatsoever.
- Go Back
- Continue
Found Something Wrong in this Lesson?
Report a Bug or Comment on This Lesson — Your input is what keeps Tizag improving with time!
Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article
The HTML textarea wrap Attribute is used to specify that in which manner the text is to be wrapped in a text area when a form is submitted.
Syntax:
<textarea wrap="soft|hard">
Attribute Values:
- soft: It specifies that the Text present in the Textarea would not be wrapped after submitting the form. This is the default value.
- Hard: It specifies that the Text in a Textarea is wraps when submitting the form.
Example: This Example that illustrates the use of wrap attribute in the Textarea Element.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML Textarea wrap attribute
</title>
</head>
<body style="text-align:center">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>
HTML Textarea wrap attribute
</h2>
<textarea id="GFG_ID"
rows="3"
cols="10"
name="Geeks"
wrap="hard">
This text is wrapped in the text area field.
</textarea>
<br>
<button onclick="myGeeks()">
Submit
</button>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome 16
- Edge 12
- Firefox 4
- Internet Explorer 6
- Opera 12.1
- Apple Safari 6
Like Article
Save Article
You can wrap a long string, which does not have any whitespace character by using the CSS word-wrap property, or overflow-wrap, if you use CSS3.
In this snippet, you’ll find some examples for block elements, as well as for the inline ones.
In the example below, we set the word-wrap property to its «break-word» value for the <span> element and specify its width. Also, we set the display property to “inline-block”.
Example of wrapping a long string without a whitespace character for inline elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
width: 135px;
word-wrap: break-word;
display: inline-block;
}
</style>
</head>
<body>
<span>
LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
</span>
</body>
</html>Result
LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
Example of wrapping a long string without a whitespace character for block elements:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
textarea {
width: 100px;
word-wrap: break-word;
}
</style>
</head>
<body>
<textarea>
LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremI
</textarea>
</body>
</html>Here too, we specified the word-wrap and width properties, but for the <textarea> element.
In CSS3, the word-wrap property is renamed to overflow-warp. So, consider this when choosing the solution.
Example of wrapping a long string without a whitespace character with the CSS overflow-wrap property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
span {
display:inline-block;
width: 150px;
overflow-wrap: break-word;
}
</style>
</head>
<body>
<span>
LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
</span>
</body>
</html>