How to replace line break tags ( ) with spaces in CSS

You can’t. This post on TimonWeb with the same title as mine is wrong. As is this one from Gallagher Website Design, which of course it is, because it’s exactly the same.

And now that all of the search engines (even my beloved DuckDuckGo) are using AI to gather answers, the LLMs are permanently ensconcing this incorrect answer to the question.

It doesn’t work.

I get why it might seem like it works. In fact it’s kind of not really doing anything… at least in terms of adding the space. The only reason there’s a space between the words where the   tag got removed is because there’s a space there in the HTML.

HTML honors spaces. Well, one space. If there’s a line break, that’s the space. If you get rid of the line break and there’s still space in the HTML, then HTML renders a space. But if removing the   tag pushes two words together, they’re really going to get pushed together.

The only way (at least, the only way I’ve been able to find, and I’ve spent more time on this than it’s worth) to get there to be a space when you remove the   tag, is to actually have a space in the HTML.

Since I’m dealing with WordPress, which is the reason it’s a problem, I have also come up with a WordPress-specific solution. The reason it’s a problem in WordPress, at least in the Block Editor (a.k.a. Gutenberg) is that if you insert a line break in your text, i.e. by typing Shift-Enter, it inserts a   tag without any space between the words.

I guess Gutenberg is trying to be efficient by not adding an unnecessary space. You know, just like how it makes efficient use of CSS class names and inline styles like this:

<div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-7d06e0e1 wp-block-columns-is-layout-flex" style="margin-top:var(--wp--preset--spacing--80);margin-bottom:var(--wp--preset--spacing--80)">

I’d insert the eyeroll emoji here, but I use my No Nonsense plugin to prevent WordPress from unnecessarily… uh, I mean efficiently, loading a bunch of emoji-related JavaScript on every page of every one of the 42% of the websites in the world it powers.

Let’s see, now where was I? You can use the the_content filter to force WordPress to add a space after   tags in page content:

function my_the_content($content) {
    $content = str_replace('<br>', '<br> ', $content);
    return $content;
}
add_filter('the_content', 'my_the_content', 11, 1);

(Yes, this might be adding an extra space in places where there’s already a space after the   but it doesn’t matter… as I said, HTML honors the space, but only one space.)

Once you’ve got that in place, then you can write some CSS to selectively remove   tags from display. In my case, I want to remove them in Cover blocks on mobile devices, and my mobile breakpoint is 1024 pixels. So here’s the CSS I wrote:

@media screen and (max-width: 1024px) {
    .wp-block-cover__inner-container br { display: none; }
}

Note here that I’m just hiding the   tags altogether, which is all you really can do. But as long as that   tag is followed by an actual space (or an actual line break) in the HTML code itself, then you’ll get a space between the words.