Prevent line break in header - html

Question

I have an h1 with line breaks. On mobile devices, there should be no line breaks.
This code works on Chrome and iPhone but not on Firefox. So I am afraid it might not work on all devices/browsers.
(The code snippet seems to ignore the media query).
h1 {
text-align: right;
}
#media screen and (max-width: 839px) {
h1 {
br {
content: "";
&:after {
content: " ";
}
}
}
}
<h1>This is a<br>header<br>with line breaks</h1>
Note the spaces which get inserted by CSS when the header is on 1 line. And also the header should be able to align to right.
How could I make this cross-browser compatible?

Answer 1

I ended up following the advice of Tim Medora (thanks!).
Pseudo elements on br are not crossbrowser, for example FF and iE will not respond.
I adjusted my CMS (I built a PHP viewHelper in TYPO3) which converts linebreaks to spans.
$textBreakParts = explode("\n", $text);
$convertedText = "<span>".implode('</span> <span>', $textBreakParts)."</span>";
In SASS:
h1 span {display: block}
#media screen and (max-width: 839px) {
h1 {
span {
display: inline;
}
}
}

Answer 2

If you leave the header normally spaced and put the <br> after each word you want it to break at, a space will be left to the left side of each line which is okay since you want it to be aligned to the right. Then add display:none on the <br> at the proper screen size.
h1 {
text-align: right;
}
#media screen and (max-width: 839px) {
h1 br{
display:none;
}
}
<h1>This is a<br> header<br> with line breaks</h1>