Text Area with white-space like "pre nowrap"

Get Started
1

Hello,

I’m having an annoying problem hopefully someone has a solution.

I’m trying to set up a text area so it acts like it’s <pre>, but without it wrapping (so it’ll get a horizontal scrollbar if necessary).

I’ve tried all the values, and can’t quite get what I want. Either it kills the whitespace (pre-line), keeps whitespace but wraps (pre, pre-wrap), turns into a blob (normal), or gets condensed into one line (nowrap).

I’m using Chrome, which according to the reference is fully compatible, but no such luck.

Any ideas?

2

HI,

This works for all but gecko if I understand you correctly.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
textarea {
    white-space: nowrap;
    overflow:auto;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <div>
        <label for="test">Enter Text</label>
        <textarea name="test" cols="45" rows="5" id="test"> This is a long line of text this is a long line of text this is a long line of text</textarea>
        <!-- <textarea name="test" cols="45" rows="5" wrap="off" id="test">This is a long line of text this is a long line of text this is a long line of text</textarea> -->
    </div>
</form>
</body>
</html>

The only thing I got to work in gecko was the invalid wrap attribute.


<textarea name="test" cols="45" rows="5" [B]wrap="off"[/B] id="test">This is a long line of text this is a long line of text this is a long line of text</textarea>
3

Awesome, that’s good enough for me. =)

Luckily this is just a back-end thing, so I can dictate which browser(s) they’re allowed to use.

Thanks.

4