Textarea horiz. scrolling does not apply

I have a text box containing code. The problem is that in order for it to look good, Textarea must stop wrapping the text and use the horizontal scroll bar instead.

I tried this:

textarea { overflow: scroll; overflow-y: scroll; overflow-x: scroll; overflow:-moz-scrollbars-horizontal; } 

and this:

 textarea { overflow: auto; overflow-y: scroll; overflow-x: scroll; overflow:-moz-scrollbars-horizontal; } 

However, the horizontal scroll bar does not apply.

What is the right way to do this?

+6
source share
2 answers

Set the wrap attribute to off

 <textarea wrap="off"></textarea> 

Demo: http://jsfiddle.net/wesley_murch/HZkLK/

There is also the meaning of soft and hard for wrap . The only worthy mention of this I found on tizag.com , although there should be better ones. On the linked page:

The wrap attribute refers to how text responds when it reaches the end of each line in a text field. Wrapping paper can be one of three settings:

 soft hard off 

Gently forces words to wrap once inside the text area, but when the form, words will no longer appear as such (line breaks will not be added).

Hard wraps the words inside the text box and line breaks at the end of each line, so that when the form is presented exactly as it is in the text box.

Off sets the text field to ignore all wrapping and placing text in one current line.

I'm not sure about HTML5, but it will not be checked in XHTML or HTML4 (the validator tells me there is no "WRAP" attribute), but it seems to work in the following browsers that I checked:

  • Firefox 4
  • IE6, IE7, IE8
  • Chrome 10
  • Opera 11
  • Safari 5.0.3

I do not think that this can be done using a cross browser with CSS. I quickly walked up to find the white papers / support for this, and when I found something useful, it was here on Stack Overflow!

See this answer for more details:

How to remove word wrap from textarea?

However, the CSS solution provided there does not work for me in Firefox 4 ...

+11
source
 textarea { white-space:nowrap; } 

Fiddle

+2
source

Source: https://habr.com/ru/post/889472/


All Articles