Textarea Horizontal Scrolling Bar

2014/12/16

The Experimental Text Data

arisawa           1    0:00   0:00      208K Await    bootrc
arisawa           2    6:42   0:00        0K Wakeme   genrandom
arisawa           3    5:19   0:00        0K Wakeme   mouse
arisawa           5    0:00   0:00        0K Wakeme   alarm
arisawa           7    0:00   0:00      180K Pread    paqfs
arisawa          10    0:00   0:00      116K Pread    mntgen
arisawa          17    0:02   0:00        0K Wakeme   floppy
arisawa          19    1:02   0:00        0K Wakeme   iasata

Experiments

► What I want

This is what I want. That is,

<textarea cols=50 rows=5 style="overflow:scroll" wrap="off">

Note that deprecated wrap="off" is used there.
I can not find a suitable substitute in HTML5 for this attribute.

► all default

<textarea cols=50 rows=5>

Text is wrapped.

► overflow

auto

<textarea cols=50 rows=5 style="overflow:auto">

Text is wrapped.

scroll

<textarea cols=50 rows=5 style="overflow:scroll">

Text is wrapped and the result is unreasonable.
Why wrapped? We have horizontal scrolling bar area! Where is the knob?

► white-space

It seems the white-space property is intended to apply to cells in table.
The effect is unclear to me when it is allied to textarea.

normal

It is said that this is the default.
However you can understand that: if this is applied to textarea, the “normal” is not the default.

<textarea cols=50 rows=5 style="overflow:auto;white-space:normal">

pre

This is probably the default to textarea.

<textarea cols=50 rows=5 style="overflow:auto;white-space:pre">

nowrap

<textarea cols=50 rows=5 style="overflow:auto;white-space:nowrap">

pre-wrap

<textarea cols=50 rows=5 style="overflow:auto;white-space:pre-wrap">

pre-line

<textarea cols=50 rows=5 style="overflow:auto;white-space:pre-line">

Tested Browsers

I have tried the following browsers. The results are all the same.