stop code wrap

[jashwanth999]

Is there any way to stop code wrap and make it horizontal scroll

[jaywcjlove]

This can not be achieved, it can only be so simple.
@jashwanth999 There are more complex options here:

https://github.com/jaywcjlove/react-monacoeditor
https://github.com/uiwjs/react-codemirror

[vangelov]

@jaywcjlove I just wonder why something like overflow-wrap: normal does not work here?

[jaywcjlove]

@vangelov This highlighting is implemented by overlapping pre and textarea. Maybe this is why overflow-wrap: normal doesn't work.

[vangelov]

Oh, I see. Thanks for the answer.

[mskafo]

so there's nothing to do?

[nnnnat]

I was able to prevent the code from text wrapping by nesting the CodeEditor inside a div with overflow: auto; and setting the width on the CodeEditor to max-content.

<div style={{ overflow: 'auto', }}>
  <CodeEditor style={{ width: 'max-content', }} />
</div>