Solved

HTML: No Word Wrap in Textarea

Posted on 2012-03-23
5
626 Views
Last Modified: 2012-03-24
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

0
Comment
Question by:hankknight
5 Comments
 
LVL 1

Expert Comment

by:matthewmilam
ID: 37758075
To stop the word wrapping, use this code:

.menu{
    white-space: nowrap;
0
 
LVL 12

Expert Comment

by:Tony van Schaik
ID: 37758088
Just add white-space:nowrap; in your CSS:

<!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;
 white-space:nowrap;
}
</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

0
 
LVL 16

Author Comment

by:hankknight
ID: 37758807
white-space:nowrap; does not seem to work in Firefox.  If you try the example above in Firefox you will see that it does not work.
0
 
LVL 12

Accepted Solution

by:
Tony van Schaik earned 500 total points
ID: 37759411
This should work now...

<!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;
 white-space:prewrap;
}
</style>
</head>
<body>

<div>
<textarea cols="10" rows="0" readonly="readonly" wrap="off">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

0
 
LVL 42

Expert Comment

by:David S.
ID: 37759457
Why are you using a <textarea> element anyway? (I ask because I see that you've set it to be readonly.) Why not just use a <pre> element and style it the same way?
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question