CSS for Textarea With Console Style Layout

I have a Textarea that I want to behave like a Console / cmd.exe prompt.

I have applied a cols and rows to control the size, and the following CSS rules:

word-break: break-all;
white-space: break-spaces;

Code (markup):

The use of width and height properties is also fine, but inconsistent across browsers on Textarea elements, much like <pre> elements work, but <pre> elements do not have additional characteristics that I need.

Works exactly as I want in Firefox, but not in Chrome:

Firefox (works like I want)


Chrome (does NOT work like I want, notice that "foo" is word broken at 42 chars)

In Chrome, the issue is that it breaks in the middle of the previous word at the same size, but adjusting that size a bit, the spaces are retained on the previous line and collapsed, which is NOT what I want.

• I want the space characters after the word is wrapped to the next line.
• I would like to do so without having to replace User Text with Javascript or additional elements.
• Each line must display all characters, especially spaces, uncollapsed
• Each line can not have any more than 43 characters so they should wrap to the next line uncollapsed
• Line Wraps should NOT occur in the middle of the previous word
• Line Wraps should NOT wrap spaces to the last line as it exceeds 43 characters
• Line Wraps should NOT collapse spaces

In Chrome, the previous line is not wrapped in the correct location. The user should NOT have to hit ENTER, so it should automatically wrap the space to the next line, like a Console.

https://www.webucate.me/textarea.htm

How can I make my Textarea break at 43 characters and wrap \n Newlines and preserve Spaces to the next line in consistently?

 

Either. I was hoping to do it in CSS as a listener approach is gonna be a pain. Trust me, I tried... just take a peek at the listeners already in the example page just to limit the number of total lines to a "maxrows" attribute...

 

How about using a contenteditable div instead? But maybe it's not what you're looking for.

https://jsfiddle.net/g8djstqf/1/

 

Tried it. Same effect. Your code works how I would like in Firefox, but not in Chrome.

It was a good idea. I put it on a <pre> element, but then I am not able to get element.selectionStart or element.selectionEnd on my listeners which I use to limit the input to x lines. Pain in the butt there because we have to factor in the total number of newline \n characters bla bla bla (its unrelated) so the <pre> idea is good, but breaks a lot of stuff. Considering the behavior is different in each browser, I need a different approach and I am plum out of ideas.

Tried pseudo elements too. They dont work so well in Textareas and Newlines since n is always an unknown.

This is turning out to be a deceptively difficult problem...

 

Switch break-all for break-word.

In this case what you're seeing is that FF does NOT implement break-all properly. Chrome's behavior is the correct one for what break-all means.

 

Hmm thats interesting that Chrome is the one with the correct behavior. I havent been able to get ANYTHING to work in chrome for me...

What I would really like it to do is to not care what the character is and just wrap at the 43rd character, just like a Console...

 

The combination for console-like behavior is:

white-space:pre-wrap;
word-break:break-all;

Code (markup):

Which is uniform between FF and Chrome. Just beware that as a form of pre-formatted text, /r/n/t and multi-space are all preserved... though if you're trying for a console-like input/output, that might be exactly what you want/need.

The "hard' part being to actually get the "43rd character' since that's not actually a value one can reliably set in CSS, since fonts are not a uniform size and non-monospace fonts no two characters have the same width.

So you'll want to set a monospace font, and even then you'd have to use a webfont for consistency of width across OS platforms.

Though that raises the responsive/mobile issue where you shouldn't be trying to fix the width of things like textareas. At most you'd set a max-width.

 

Tried the combination of those two suggested lines. The outcome is in Chrome it causes whitespace at the beginning of the line to collapse.

A mobile version will be very different, and use a page completely independent of the one Im working on. This is styling for desktop like computers in this section.

The limitations result because the text entered here is eventually rendered in a Canvas element, which, oddly was a thousand times easier to work with. So it has to look the same in this page as it does on my rendered output, which for me are repeatedly inconsistent.

 

Perhaps this visual explanation will work a little better:



I want that space to NOT COLLAPSE or be put on the line above...