Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML: No Word Wrap in Textarea

Posted on 2012-03-23
5
Medium Priority
?
637 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 2000 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 43

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

730 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