CODEWITHSUNDEEP
cssreplacecharacter
peek
peek

Reputation: 1

replace <br> with characters/string using css?

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.

Upvotes: 0

Views: 6350

Answers (2)

jenkek
jenkek

Reputation: 11

/* 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

Upvotes: 1

kalley
kalley

Reputation: 18462

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

Upvotes: 2

Related Questions