<p>Unfortunately you can't really configure how Redactor formats it's input. Given this I think your current solution is the most effective.</p>

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

<pre class="lang-css prettyprint-override"><code>br.hide-for-small {
    content: '';
    display: inline-block;
    width: 1ch;
}
</code></pre>

<p>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.</p>

CC BY-SA 3.0
2016-01-21T23:24:21.097Z
2016-01-21T23:33:14.553Z
2016-01-21T23:33:14.553Z
Ben Fleming
<p>Craft now has a "<strong>Clean up HTML?</strong>" 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.</p>

CC BY-SA 4.0
2018-07-31T16:29:53.810Z
2018-07-31T16:29:53.810Z
Nick F
<p>Try
HTML:</p>

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

<p>CSS:</p>

<pre><code>p.rich-text{
  white-space: pre-line;
}
</code></pre>

CC BY-SA 4.0
2018-11-23T03:52:37.680Z
2018-11-23T03:52:37.680Z
Parry Huang
<p>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.</p>
<p>Using the HTML/Source button within Redactor works fine until the entry is saved.</p>
<pre><code>Line breaks were the first thought.&lt;br class=&quot;hide-for-small show-for-large&quot;&gt; Not an afterthought.
</code></pre>
<p>The code above produces this for large displays:</p>
<h1>Line breaks were the first thought.</h1>
<h1>Not an afterthought.</h1>
<p>And should produce this for small displays:</p>
<h1>Line breaks were the first thought. Not an afterthought.</h1>
<p>However the white space after the line break is removed upon save, which produces this:</p>
<pre><code>Line breaks were the first thought.&lt;br class=&quot;hide-for-small show-for-large&quot;&gt;Not an afterthought.
</code></pre>
<p>Which displays like this on small displays:</p>
<h1>Line breaks were the first thought.Not an afterthought.</h1>
<p>This is not the desired result.</p>
<p>While I am able to correct this with the Twig replace filter, I would prefer not having to manage those filters within the templates.</p>
<p>Any clue how to prevent the original white space from being removed after line breaks within a Rich Text Field?</p>
<p>(Note the white space is not removed within Plain Text Fields.)</p>

CC BY-SA 3.0
2016-01-21T03:04:57.453Z
Unfortunately you can't really configure how Redactor formats it's input. You can try this alternative style for your `<br>` tags when hiding: `br { content: ''; display: inline-block; width: 1ch; }` which will collapse the line break with an added space. It'll only work on Safari and Chrome though (but not sure about IE). That might be good enough since most mobile users are using Chrome.
Ben Fleming
CC BY-SA 3.0
2016-01-21T18:35:46.700Z
@Benjammin' that sounds good enough to make it an actual answer to me! :)
Brad Bell
CC BY-SA 3.0
2016-01-21T23:24:34.093Z
@BradBell Done :)
Ben Fleming
<redactor><richtext><whitespace>
How do you prevent white space from being removed after line breaks within a Rich Text Field?
# How do you prevent white space from being removed after line breaks within a Rich Text Field?

(Asked by: username_0 on 2016-01-21)

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

**Tags:** redactor, richtext, whitespace

> **Comments:**
> **username_1**: Unfortunately you can't really configure how Redactor formats it's input. You can try this alternative style for your `<br>` tags when hiding: `br { content: ''; display: inline-block; width: 1ch; }` which will collapse the line break with an added space. It'll only work on Safari and Chrome though (but not sure about IE). That might be good enough since most mobile users are using Chrome.  
> **username_2**: @Benjammin' that sounds good enough to make it an actual answer to me! :)  
> **username_1**: @BradBell Done :)  

---

## 3 answers

### Answer by username_1 on 2016-01-21. Score: 3 | Accepted answer

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  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 by username_3 on 2018-07-31. Score: 1

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 by username_4 on 2018-11-23. Score: 1

Try
HTML:
Line breaks were the first thought.Not an afterthought.

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


---

