Text Area with white-space like "pre nowrap"

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?

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>

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.