1

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

  • 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. – Ben Fleming Jan 21 '16 at 3:04
  • @Benjammin' that sounds good enough to make it an actual answer to me! :) – Brad Bell Jan 21 '16 at 18:35
  • @BradBell Done :) – Ben Fleming Jan 21 '16 at 23:24
3

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.

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.

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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.