Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-01-21T23:24:21.097Z
Answers.LastActivityDate: 2016-01-21T23:33:14.553Z
Answers.LastEditDate: 2016-01-21T23:33:14.553Z
Answers.UserDisplayName: Ben Fleming
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-07-31T16:29:53.810Z
Answers.LastActivityDate: 2018-07-31T16:29:53.810Z
Answers.UserDisplayName: Nick F
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-11-23T03:52:37.680Z
Answers.LastActivityDate: 2018-11-23T03:52:37.680Z
Answers.UserDisplayName: Parry Huang
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-01-21T03:04:57.453Z
Comments.Text: 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.
Comments.UserDisplayName: Ben Fleming
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-01-21T18:35:46.700Z
Comments.Text: @Benjammin' that sounds good enough to make it an actual answer to me! :)
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2016-01-21T23:24:34.093Z
Comments.Text: @BradBell Done :)
Comments.UserDisplayName: Ben Fleming
Tags: <redactor><richtext><whitespace>
Title: How do you prevent white space from being removed after line breaks within a Rich Text Field?
ThreadText: # 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.<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.)
  
  **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**: @username_2 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 `<br>` tags when hiding:
  
  ```css
  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:
  
  ```
  <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;
  }
  
  ```
  
  
  ---
  
  