Sometimes when pasting content into WordPress’ native tinymce editor, non-breaking space characters appear in the output where there should be spaces. You can verify this is this issue by inspecting the source code in your browser’s dev tools. As a result text may break outside of its container and give a disastrous look. When troubleshooting this, you look at the editor in Text or Visual mode there appear to be just normal spaces. Strange.
My first instinct is to see if there are any content filters going on at the front-end. A common instigator for markup issues can be wp_autop() or some other filtering function. This was not the case though.
So I decided to correct the problem at the source, since the issue was happening with pasted text inside the tinymce editor.
It goes like this:
1) open up dev tools in your browser (control + shift + i for Chrome on Windows)
2) go to the console tab
3) Here you can enter commands. We are going to run some manual lines of jQuery/js . Make sure you have the visual mode enabled.
var contents = jQuery('#content_ifr').contents().find('#tinymce').html();
This stores the content that tinyMCE is working with in a variable.
var filtered = contents.replace(/ /g, ' ');
This filters that content and replaces non-breaking spaces with normal spaces. Note that this also gets rid of deliberate/manual instances of non-breaking spaces. If you need to preserve these, you’ll need more complex code or you’ll need to reapply them manually.
jQuery('#content_ifr').contents().find('#tinymce').html(filtered);
This replaces the tinyMCE window with the filtered content.
4) Update the post. Check on the front-end. And now your text should look proper.