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.
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
/* 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 <br></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
Related
I want to visually replace parts of a string, but when I select/copy the string the original text should be copied.
I came across this answer https://stackoverflow.com/a/67356640/6567275 and CSS content seemed perfect for this, but it doesn't stick.
[data-replace] {
content: attr(data-replace);
background: yellow;
}
.replace {
content: "test";
background: orange;
}
.replace-with-image {
content: url("//cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico");
background: green;
}
<p>
foo <span data-replace="test">bar</span> baz.<br>
foo <span class="replace">bar</span> baz.<br>
foo <span class="replace-with-image">bar</span> baz.<br>
</p>
This should show "foo test baz." on the screen, <br>
but when I select/copy it it should copy as "foo bar baz."
I know ::before and ::after, but that's not what I'm talking about. According to MDN the CSS content property applies to "All elements, tree-abiding pseudo-elements, and page margin boxes" and according to caniuse this feature is available for several years across browsers.
I tried it in Chrome, Opera, Firefox and Edge.
Do I misunderstand something? Or am I doing something wrong?
Why doesn't this work?
Edit: replace element content with an image works :D
I have a problem regarding symbol https://www.htmlsymbols.xyz/unicode/U+1F861
:after{
content: "\01F861";
}
Every browser displays normally this element except IE.
Does anyone know workaround with it?
I have checked your code, it will display a square in IE browser, it means the font used does not have the glyph for that character.
As a workaround, try to use the CSS Entities. Please check the following sample:
<style>
.ribbon {
background-color: #5BC8F7;
}
.ribbon::after {
content: " \2191";
background-color: #FFBA10;
}
</style>
<span class="ribbon">Look at the orange box after this text. </span>
The result in IE browser as below:
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.
Using the following markup works cross browsers:
HTML
<div class="test">WORD<br> WITH<br> SPACE</div>
<div class="">WORD <br>WITH <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
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"; }
In my HTML I have a <div>, and inside the <div> I need different vertical spacing between lines of text. I'm achieving this by using <br /> elements with a CSS class that corresponds to the amount of spacing I want.
For instance, for a 5px gap, I use a <br> with the height5 class:
<br /><br class="height5" />
Similarly, height2 and height10 and whatever exist for the same purpose.
The CSS classes are defined like so:
br.height2 {line-height:2px;}
br.height5 {line-height:5px;}
This is working in IE6+, FF2+, and Opera but for some reason there are huge gaps in Safari and Chrome (as if those two browsers are ignoring it and just applying regular breaks). I tried testing with larger line-heights like 20px or 30px and Safari and Chrome recognize those. They seem to be ignoring anything under 5-10 pixels.
Help? Thanks!
This worked on Chrome (the content attribute did the trick):
br {
content: " ";
display: block;
margin: 1em;
}
Those browsers might be reading your white space (carriage return, etc) and propping it open with a sort of value. I suggest using multiple div tags and style the divs with margin-bottom attributes of the space you want.
<div style="margin-bottom: 2px">content</div>
<div style="margin-bottom: 5px">content</div>
<div>content</div>
I know this is old, but my answer here is cross-browser without turning br into a block
/* line height can be set to whatever you want*/
br {line-height: 0.1; content: " "}
Try this:
br { line-height: 1em; }
or:
br { margin-top: 2em; }
This worked for me for both firefox and chrome. Got the idea from #SamuelC and #anushr.
br{
display: block;
line-height: 0.1;
content: " ";
}
I want to append a <br /> to a particular class. Using the :after pseudo class simply displays <br /> as text.
Is there a way to make this work?
It's internal for IE8 so browser issues aren't a problem. If I do
<span class="linebreakclass">cats are</span> brilliant
I want "brilliant" to appear on a new line.
You won't be able to render HTML tags but you can set style like this:
.needs-space:after {
content: " ";
display: block;
clear: both; /* if you need to break floating elements */
}
The main setting here is display: block; This will render :after content inside a DIV. And this pseudo element is supported by all latest browsers. Including IE. Saying this you should be aware of your users and their browsers.
You can use \A escape sequence, which will render as a newline:
.new-line:after {
white-space: pre-wrap;
content: "\A";
}
This method was mentioned in the CCS 2.1 Specification for the content property:
Authors may include newlines in the generated content by writing the
"\A" escape sequence in one of the strings after the 'content'
property. This inserted line break is still subject to the
'white-space' property.
It gets worse - the :after class doesn't even work in IE6 (and probably some other browsers too).
I think what you really want here is a margin on the bottom of the element, to provide spacing.
Simply
.myElement {
margin-bottom: 1em;
}
You can either add a custom icon from your assets, by doing simply ..
&:after {
content: url('~content/icons/drop-down-arrow.png');
}