Solved

HTML: No Word Wrap in Textarea

Posted on 2012-03-23
5
624 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

806 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