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
Related
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 found that display:content doesn't work in Safari.
What is the alternative of it for Safari?
I found a solution here.
But the answer was down voted.
I imagine that you're trying to use :content incorrectly, or are trying to use a pseudo on an element that doesn't support them.
Regarding `display:contents` declaration:
This is not well supported.
Note that as documented in https://caniuse.com/#feat=css-display-contents:
iOS Safari 10 and 11, and Safari 11 renders display:contents as display:inline.
Also note that according to https://drafts.csswg.org/css-display/#box-generation:
Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and property inheritance, are not affected. As of writing, however, this is not implemented correctly in major browsers, so using this feature on the Web must be done with care as it can prevent accessibility tools from accessing the element’s semantics.
Regarding the `content:` property:
This is well supported but can only be applied to ::before and ::after pseudo-elements. Some elements (such as inputs) will not support pseudo elements. See: https://developer.mozilla.org/en-US/docs/Web/CSS/content for more info.
Demo:
Here's a very basic working example (tested in Chrome and Safari 13) of both the content: property and the contents display value.
#somediv:before {
content: "(prepended) ";
color: red;
}
#somediv:after {
content: " (appended)";
color: blue;
}
#someotherdiv {/* pointless styles */
display:contents;
border:2px solid red;
background:yellow;
}
#someotherdiv p {
color:purple;
}
<div id="somediv">
Example of content on pseudos.
</div>
<div id="someotherdiv">
<p>Example of display:contents. Note that parent container isn't rendered?</p>
</div>
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"; }
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
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');
}