How do you prevent white space from being removed after line breaks within a Rich Text Field? I am utilizing a CSS class within headlines for responsive line breaks. This class shows the line break for large displays and hides the break for small displays.
Using the HTML/Source button within Redactor works fine until the entry is saved.
Line breaks were the first thought.&lt;br class=&quot;hide-for-small show-for-large&quot;&gt; Not an afterthought.

The code above produces this for large displays:
Line breaks were the first thought.
Not an afterthought.
And should produce this for small displays:
Line breaks were the first thought. Not an afterthought.
However the white space after the line break is removed upon save, which produces this:
Line breaks were the first thought.&lt;br class=&quot;hide-for-small show-for-large&quot;&gt;Not an afterthought.

Which displays like this on small displays:
Line breaks were the first thought.Not an afterthought.
This is not the desired result.
While I am able to correct this with the Twig replace filter, I would prefer not having to manage those filters within the templates.
Any clue how to prevent the original white space from being removed after line breaks within a Rich Text Field?
(Note the white space is not removed within Plain Text Fields.)
Unfortunately you can't really configure how Redactor formats it's input. Given this I think your current solution is the most effective.

That said, you could try this alternative style for your &lt;br&gt; tags when hiding:

br.hide-for-small {
    content: '';
    display: inline-block;
    width: 1ch;
}


This will collapse the line break with an added space. It'll only work on Safari and Chrome though. That might be good enough since most mobile users are using Webkit-based browsers.