Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 649
  • Last Modified:

HTML: No Word Wrap in Textarea

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
hankknight
Asked:
hankknight
1 Solution
 
matthewmilamCommented:
To stop the word wrapping, use this code:

.menu{
    white-space: nowrap;
0
 
Tony van SchaikFront-end Web developerCommented:
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
 
hankknightAuthor Commented:
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
 
Tony van SchaikFront-end Web developerCommented:
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
 
David S.Commented:
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now