How do you prevent white space from being removed after line breaks within a Rich Text Field?

Question

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.<br class="hide-for-small show-for-large"> 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.<br class="hide-for-small show-for-large">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.)

Answer 1

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 <br> 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.

Answer 2

Craft now has a "Clean up HTML?" checkbox on Rich Text fields (it's hidden under "Advanced" on the field edit page). I was having problems with Redactor removing whitespace (in my case it was extra spaces that I wanted to add), but I found that unchecking this box fixed them.

Answer 3

Try HTML:

<p class="rich-test">Line breaks were the first thought.<br class="hide-for-small show- 
for-large">Not an afterthought.</p>

CSS:

p.rich-text{
  white-space: pre-line;
}