How to define a TextArea that doesn't wrap?

Flow
1

I have a specific text-area which I do not want to wrap lines. Rather, if a contained line is too long I want a horizontal scrollbar to appear.

I tried with wrap: "off" and white-space: "no-wrap" (two examples I had found via Google) but neither worked. What’s the suggested way to achieve this?

2

Assuming Vaadin 10 or greater, this needs to do the trick for me:

    white-space: nowrap;
    overflow-x: auto;
    padding-bottom: 1em;

(this is assuming you want a horizontal scrollbar, but retain the expanding vertical behavior)

Note that these styles need to be applied for the part~="value" which is the <textarea> element inside the vaadin-text-area custom component.

3

Not quite what I needed. The above combination simply put EVERYTHING onto a single line, even though there ARE line ends (<CR><LF>) in the text to be displayed which I need to be respected.
But based on the above I experimented further and this finally did the trick:

	white-space: pre;
	overflow-x: auto;
	padding-bottom: 1em;

Cheers and thanks for responding!