Wie kann ich mit einer solchen Methode Text durch CSS ersetzen?
.pvw-title img[src*="IKON.img"] { visibility:hidden; }Anstelle von ( img[src*="IKON.img"] ), muss ich stattdessen etwas verwenden, das Text ersetzen kann.
Ich muss die [ ] um es zum Laufen zu bringen.
<div class="pvw-title">Facts</div>
Ich muss " ersetzen Fakten ".
Nun, wie viele gesagt haben, ist dies ein Hack. Ich möchte jedoch noch einen aktuelleren Hack hinzufügen, der den Vorteil von flexbox y rem d.h.
flexboxpadding und/oder margin in den Text explizit mit px die bei unterschiedlichen Bildschirmgrößen auf verschiedenen Geräten und Browsern zu unterschiedlichen Ergebnissen führen könnenHier ist die Lösung, kurz gefasst flexbox sorgt dafür, dass es automatisch perfekt positioniert wird und rem ist eine stärker standardisierte (und automatisierte) Alternative für Pixel.
CodeSandbox mit unten stehendem Code und Ausgabe in Form eines Screenshots, lesen Sie bitte einen note unterhalb des Codes!
h1 {
background-color: green;
color: black;
text-align: center;
visibility: hidden;
}
h1:after {
background-color: silver;
color: yellow;
content: "This is my great text AFTER";
display: flex;
justify-content: center;
margin-top: -2.3rem;
visibility: visible;
}
h1:before {
color: blue;
content: "However, this is a longer text to show this example BEFORE";
display: flex;
justify-content: center;
margin-bottom: -2.3rem;
visibility: visible;
}Hinweis: Für verschiedene Tags benötigen Sie möglicherweise unterschiedliche Werte für rem Diese ist gerechtfertigt für h1 und nur auf großen Bildschirmen. Allerdings mit @media könnte man dies leicht auf mobile Geräte ausweiten.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Devnote</title>
<style>
.replacedValue {
visibility: hidden;
position: relative;
}
.replacedValue:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "Devnote is developer answer solve. devnote.in";
}
</style>
</head>
<body>
<p class="replacedValue">Old Text Here</p>
</body>
</html>Ausgabe
Devnote is developer answer solve. devnote.in
Ich hatte ein Problem, bei dem ich den Text eines Links ersetzen musste, aber ich konnte weder JavaScript verwenden noch den Text eines Hyperlinks direkt ändern, da er aus XML kompiliert wurde. Außerdem konnte ich keine Pseudoelemente verwenden, oder sie schienen nicht zu funktionieren, als ich sie ausprobiert hatte.
Im Grunde habe ich den Text, den ich wollte, in einen Span gesetzt und den Anker-Tag darunter gesetzt und beides in ein Div eingeschlossen. Ich habe den Anker-Tag per CSS nach oben verschoben und dann die Schrift transparent gemacht. Wenn man nun mit dem Mauszeiger über den Bereich fährt, verhält er sich wie ein Link. Eine wirklich hacky Weg, dies zu tun, aber das ist, wie Sie einen Link mit verschiedenen Text haben kann ...
Hier eine Anleitung, wie ich dieses Problem umgehen konnte
Mein HTML
<div class="field">
<span>This is your link text</span><br/>
<a href="http://stackoverflow.com//www.google.com" target="_blank">This is your actual link</a>
</div>Mein CSS
div.field a {
color: transparent;
position: absolute;
top:1%;
}
div.field span {
display: inline-block;
}Das CSS muss je nach Ihren Anforderungen angepasst werden, aber dies ist ein allgemeiner Weg, um das zu tun, was Sie wollen.
Damit dies funktioniert, muss die Zeilenhöhe zum CSS-Inhalt hinzugefügt werden. Dadurch wird der Block über dem ausgeblendeten zu sehen sein, wodurch der geänderte Text nicht verborgen wird.
Beispiel mit Verwendung vor :
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'Whatever it is you want to add';
line-height: 1.5em
}
Ohne Tricks ist das nicht wirklich möglich. Hier ist eine Möglichkeit, die funktioniert, indem der Text durch ein Bild ersetzt wird.
.pvw-title{
text-indent: -9999px;
background-image: url(text_image.png)
}Dies wird normalerweise mit JavaScript gemacht. Hier ist, wie es mit jQuery getan werden kann:
$('.pvw-title').text('new text'); CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
