Fake removing a break tag
with CSS

Question

I've been trying to remove the line break that is caused by a break tag

I have come up with a solution that works in chrome, but not in firefox / IE11. Kind of curious if there is a CSS only solution that I could use in this situation that would work across most modern browsers:

HTML

<p>This line breaks in firefox,<br> but not chrome</p>

CSS

br {
    display: inline-block;
    content: " ";
    width: 7px;
}

JSFiddle

Edit:

The break tag also needs to act like a space between the two words.

Can you use `br {display: none;}` ? http://jsfiddle.net/yLUZD/ — Ruan Mendes, Aug 01 '14 at 18:36
Unfortunately it needs to act like a space as well. Updating question — Mathias Rechtzigel, Aug 01 '14 at 18:37
I don't think you can. Can't you just replace all the `
`s with spaces? Either on the server or with JavaScript? `$("br").replaceWith(" ")` http://jsfiddle.net/T62LE/6/ — Ruan Mendes, Aug 01 '14 at 18:45
@JuanMendes What ends up working is using display none and then adding a right after it. The current use case is something that has a line break on desktop, but not a line break on mobile. So I would like to use only CSS / HTML as it's not a functionality type thing. — Mathias Rechtzigel, Aug 01 '14 at 18:54
Can you just use the space tag as the content? br{display: inline-block; content: " ";} — AndrewH, Aug 01 '14 at 19:18
@MathiasaurusRex I think js is the only way to do it with cross browser support — Zach Saucier, Aug 01 '14 at 19:31
Here's the current solution I'm using. Trying to avoid extra JS http://jsfiddle.net/MathiasaurusRex/8kD9G/ — Mathias Rechtzigel, Aug 01 '14 at 19:39
@MathiasaurusRex I think this is like the answer below but in css. br{display: none;} br::after {content: " ";} — AndrewH, Aug 01 '14 at 20:07
@AndrewH That won't work either. You can't give a `br` a pseudo element. — Zach Saucier, Aug 01 '14 at 20:20
[This is a relevant question](http://stackoverflow.com/questions/899252/can-you-target-br-with-css) :) — misterManSam, Aug 05 '14 at 14:46

Alex K · Answer 1 · 2014-08-05T16:41:19.493

0

I tried a few CSS methods and none of them are working in Firefox. I would suggest using a little bit of JavaScript to help you out.

Using jQuery, or just plain JS, insert a spacer element after each <br>

$('br').after('<span class="spacer"></span>');

The CSS:

br { display: none; }
.spacer { content: "\00a0"; }

edited Aug 05 '14 at 16:41

answered Aug 01 '14 at 19:36

Alex K

14,893
4
31
32

If you're already using javascript, why go through the trouble of adding a spacer span instead of just replacing it with a space? – Zach Saucier Aug 01 '14 at 19:38
Because to switch back you'd just need to do `br { display: block; }` `.spacer { display: none; }`. If you simply replace the `
` elements, you have no obvious way to return to the original state. I suppose you could store the original content as a string in a variable though. – Alex K Aug 01 '14 at 19:54
You could also just have a instead of a span. – Mathias Rechtzigel Aug 01 '14 at 19:56
Sure, but then what if you have other ` `s that were there before? Now you've got `
`s where you don't want them. – Alex K Aug 02 '14 at 15:36
1

`content: " ";` will not render a space, it will print " " – misterManSam Aug 05 '14 at 14:57
Whoops, you're right. Need to convert html entities to hex to use them in CSS. `content: "\00a0";` Updated answer. – Alex K Aug 05 '14 at 16:40

score 0 · Answer 2 · answered Aug 05 '14 at 14:36

Using the following markup works cross browsers:

HTML

<div class="test">WORD<br>&nbsp;WITH<br>&nbsp;SPACE</div>
<div class="">WORD&nbsp;<br>WITH&nbsp;<br>SPACE</div>

CSS:

.test br{
    display: none;
}

Use case is if you want to have a
tag at a certain media query while still retaining spaces between the letters. JSFIDDLE

Fake removing a break tag with CSS

2 Answers2

Fake removing a break tag
with CSS