Steps to reproduce:
Expected: Nothing noticeable should happen.
Actual: You actually edit one line apart from what is shown, this also applies to spelling errors marked by your browser.
The lines thing shouldn't be an issue as both inputs have the same CSS, but they could've got out of sync for another reason. Can you test again on beta labs after https://gerrit.wikimedia.org/r/#/c/363644/ is merged?
Still happens. I can't find the relevant CSS properties, but in the screenshot you can see that the wavy underline for the long word is not broken, while the word is. So I think that at least Firefox has word-break: break-all on the visible content, but word-break: normal on the real.
Executing mw.util.addCSS('*{word-break: break-all !important}') in the console fixes the issue (normal doesn't, but anyway I think break-all is better), so you just have to figure out, which element should get that CSS.
Change 364100 had a related patch set uploaded (by Esanders; owner: Esanders):
[VisualEditor/VisualEditor@master] Fix word wrapping CSS in source mode
Change 364100 merged by jenkins-bot:
[VisualEditor/VisualEditor@master] Fix word wrapping CSS in source mode
Change 364229 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (b76c9699b)
Change 364229 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (b76c9699b)