replace <br> with characters/string using css?

Question

i'm looking for a solution to replace a line break <br> with a character, let's say a comma.

i'm having a website that displays credits to images. in landscape mode credits are displayed like this:

title
artist
year

in portrait mode it should be displayed like this:

title, artist, year

so far i found this solution, works in safari, safari for ios and chrome (haven't tested chrome on android but i guess it should work too):

first set an empty content to remove the line break

br {content: '';}

then set the string you want the line break to be replaced with

br:after {content: ', ';)

if you need the line break to work normally again put

br {content:none;}

works great actually but is it the right way to do this? how would you replace a line break with a character in css? i'm looking for a solution in which the end user of the cms doesn't have to add too much html code when entering the credits.

This shouldn't work as content should only work with the :before and :after pseudo-classes — Ian Clark
– Ian Clark, Commented Jul 1, 2013 at 18:20
Hi and welcome on SO. I don't see any question here so I guess you want to answer one of your own question? This is perfectly accepted but you must pretend to ask a question (How would somebody...?) and then answer it below. — FelipeAls
– FelipeAls, Commented Jul 1, 2013 at 18:21
@IanClark First stackoverflow.com/a/11175158/137626 and it at least has some effect somewhere (Chrome?) on replaced elements (input? img?) that triggers a "oh now I've content and I'll behave differently"... Sorry for being so vague ;) — FelipeAls
– FelipeAls, Commented Jul 1, 2013 at 18:24
But a br is an empty/void element, so it can't contain any content. — David Thomas
– David Thomas, Commented Jul 1, 2013 at 18:25
@IanClark Found the link CSS generated content on replaced elements while kalley had already posted it :) Google is my extension memory... — FelipeAls
– FelipeAls, Commented Jul 1, 2013 at 18:30

kalley · Accepted Answer · 2013-07-01 18:25:13Z

2

Self-closing tags (eg. <br>, <img>, <input>, etc) can't have generated content. These are replaced elements.

For more information on replaced elements, see this article:http://www.red-team-design.com/css-generated-content-replaced-elements

answered Jul 1, 2013 at 18:25

kalley

18.5k2 gold badges41 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ian Clark Over a year ago

Good link, and I think it confirms that this behaviour should be treated more as a bug than a solution to this issue.

jenkek · Accepted Answer · 2015-02-05 11:34:22Z

1

/* cross browser inline-block */
p br {
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}

/* replace <br> with comma */

p br {
  content: '';
  width: 9px;
  height: 18px;
}

p br:before {
  content: ', '
}

<p>some<br />text with &lt;br&gt;</p>

works in mobile Chrome 40.0.2214.89, Chrome 40.0.2214.95, Opera 12.16, Safari 7.0.4

not work in Firefox 35.0.1 and Internet Explorer 11

answered Feb 5, 2015 at 11:34

jenkek

111 bronze badge

Collectives™ on Stack Overflow

replace <br> with characters/string using css?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related