Wie kann ich Text mit css mit einer Methode wie folgt ersetzen:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
Anstelle von (img[src*="IKON.img"]
) muss ich etwas verwenden, das Text ersetzen kann.
Ich muss [
]
verwenden, damit es funktioniert.
<div class="pvw-title">Facts</div>
Ich muss "Fakten" ersetzen.
Oder Sie könnten 'Fakten' wie folgt um einen <span>
wickeln:
<div class="pvw-title"><span>Facts</span></div>
Dann benutze:
.pvw-title span {
display: none;
}
.pvw-title:after {
content: 'whatever it is you want to add';
}
Obligatory: Dies ist ein Hack: CSS ist nicht der richtige Ort dafür, aber in einigen Situationen - z. B. haben Sie eine Bibliothek eines Drittanbieters in einem Iframe, der nur von CSS angepasst werden kann - diese Art von Hack ist die einzige Option.
Sie können Text durch CSS ersetzen. Ersetzen Sie einen grünen Button durch 'Hallo' durch einen roten Button, der 'Auf Wiedersehen' sagt, indem Sie CSS verwenden. Siehe http://jsfiddle.net/ZBj2m/274/ für eine Live-Demo:
Hier ist unser grüner Knopf:
<button>Hello</button>
button {
background-color: green;
color: black;
padding: 5px;
}
Lassen Sie uns nun das ursprüngliche Element ausblenden, aber danach ein weiteres Blockelement hinzufügen:
button {
visibility: hidden;
}
button:after {
content:'goodbye';
visibility: visible;
display: block;
position: absolute;
background-color: red;
padding: 5px;
top: 2px;
}
Hinweis:
visibility
anzeigen. Hinweis display: none
auf dem ursprünglichen Element funktioniert nicht.Wenn Sie Pseudo-Elemente verwenden und Inhalte einfügen möchten, können Sie Folgendes tun. Es setzt nicht die Kenntnis des ursprünglichen Elements voraus und erfordert keine zusätzlichen Markierungen.
.element {
text-indent: -9999px;
line-height: 0; /* Collapse the original line */
}
.element::after {
content: "New text";
text-indent: 0;
display: block;
line-height: initial; /* New content takes up original line height */
}
Basierend auf mikemaccanas Antwort ,
button {
position: absolute;
visibility: hidden;
}
button:before {
content: "goodbye";
visibility: visible;
}
ein Element, das absolut positioniert ist, wird aus dem Fluss genommen und damit nimmt beim Platzieren anderer Elemente keinen Platz ein.
Einfach, kurz, effektiv. Keine zusätzliche HTML-Datei erforderlich.
.pvw-title { color: transparent; }
.pvw-title:after {
content: "New Text To Replace Old";
color: black; /* set color to original text color */
margin-left: -30px;
/* margin-left equals length of text we're replacing */
}
Ich musste dies tun, um Link-Text für Home-Breadcrumbs außer Home zu ersetzen
SASS/WENIGER
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
color: transparent;
&:after {
content: "Store";
color: grey;
margin-left: -30px;
}
}
CSS
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
color: transparent;
}
body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
content: "Store";
color: @child-color-grey;
margin-left: -30px;
}
Sie können nicht, gut können Sie.
.pvw-title:after {
content: "Test";
}
Dadurch wird content after der aktuelle Inhalt des Elements eingefügt. Es ersetzt es nicht wirklich, aber Sie können sich für ein leeres div entscheiden und CSS verwenden, um den gesamten Inhalt hinzuzufügen.
Aber während Sie mehr oder weniger können, sollten Sie nicht. Der tatsächliche Inhalt sollte in das Dokument aufgenommen werden. Die content -Eigenschaft ist hauptsächlich für kleine Markierungen gedacht, z. B. in Anführungszeichen, die in Anführungszeichen stehen sollen.
Versuchen Sie es mit: before und: after. Einer fügt nach dem Rendern von HTML Text ein, der andere fügt vor dem Rendern HTML ein. Wenn Sie Text ersetzen möchten, lassen Sie den Inhalt der Schaltfläche leer.
In diesem Beispiel wird der Schaltflächentext entsprechend der Größe der Bildschirmbreite festgelegt.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
button:before {
content: 'small screen';
}
@media screen and (min-width: 480px) {
button:before {
content: 'big screen';
}
}
</style>
<body>
<button type="button">xxx</button>
<button type="button"></button>
</body>
Schaltflächentext:
1) mit: vorher
großer screenxxx
großer Bildschirm
2) mit: nach
xxxbig Bildschirm
großer Bildschirm
Es kann die Frage nicht perfekt beantworten, aber es hat meine Bedürfnisse und vielleicht auch andere erfüllt.
Wenn Sie also nur verschiedene Texte oder Bilder anzeigen möchten, lassen Sie das Tag leer und schreiben Sie Ihren Inhalt in mehrere Datenattribute wie <span data-text1="Hello" data-text2="Bye"></span>
. Anzeige mit einer der Pseudoklassen :before {content: attr(data-text1)}
Jetzt haben Sie verschiedene Möglichkeiten, um zwischen ihnen zu wechseln. Ich habe sie in Kombination mit Medienabfragen für einen Responsive Design-Ansatz verwendet, um die Namen meiner Navigation in Symbole zu ändern.
Das funktionierte für mich mit Inline-Text. Getestet in FF, Safari, Chrome und Opera
<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>
span {
visibility: hidden;
Word-spacing:-999px;
letter-spacing: -999px;
}
span:after {
content: "goodbye";
visibility: visible;
Word-spacing:normal;
letter-spacing:normal;
}
Ich benutze diesen Trick:
.pvw-title {
text-indent: -999px;
}
.pvw-title:after {
text-indent: 0px;
float: left;
content: 'My New Content';
}
Ich habe dies sogar verwendet, um die Internationalisierung von Seiten durch einfaches Ändern einer Basisklasse zu bewältigen ...
.translate-es .welcome {
text-indent: -999px;
}
.translate-es .welcome:after {
text-indent: 0px;
float: left;
content: '¡Bienvenidos!';
}
Ich hatte besseres Glück, den font-size: 0
des äußeren Elements und den font-size
des :after
-Selektors auf das zu setzen, was ich brauchte.
Ersetzen von Text durch Pseudoelemente und CSS-Sichtbarkeit
HTML
<p class="replaced">Original Text</p>
CSS
.replaced {
visibility: hidden;
position: relative;
}
.replaced:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: "This text replaces the original.";
}
Bei Verwendung eines Pseudoelements erfordert diese Methode keine Kenntnis des ursprünglichen Elements und keine zusätzliche Markierung.
#someElement{
color: transparent; /*you may need to change this color*/
position: relative;
}
#someElement:after { /*or use :before if that tickles your fancy*/
content:"New text";
color:initial;
position:absolute;
top:0;
left:0;
}
Dadurch wird ein Kontrollkästchen als Schaltfläche implementiert, die je nach aktiviertem Status entweder Ja oder Nein anzeigt. Es zeigt also eine Möglichkeit, Text mit CSS zu ersetzen, ohne Code schreiben zu müssen.
Es verhält sich immer noch wie ein Ankreuzfeld, bis ein POST - Wert zurückgegeben wird (oder nicht zurückgegeben wird), aber aus Sicht der Anzeige sieht es aus wie eine umschaltbare Schaltfläche.
Die Farben mögen nicht nach Ihrem Geschmack sein, sie dienen nur dazu, einen Punkt zu veranschaulichen.
Der HTML-Code lautet:
<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>
... und das CSS ist:
/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
display:none;
}
/* --------------------------------- */
/* Set the associated label <span> */
/* the way you want it to look. */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
display:inline-block;
width:80px;
height:30px;
text-align:center;
vertical-align:middle;
color:#800000;
background-color:white;
border-style:solid;
border-width:1px;
border-color:black;
cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the */
/* the label <span> is "No" */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
content:"No";
}
/* --------------------------------- */
/* When the box is checked the */
/* content after the label <span> */
/* is "Yes" (which replaces any */
/* existing content). */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the */
/* label <span> looks like this */
/* (which replaces any existing) */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
color:green;
background-color:#C8C8C8;
}
Ich habe es nur mit Firefox ausprobiert, aber es ist Standard-CSS, also sollte es woanders funktionieren.
Ich hatte ein Problem, bei dem ich den Text des Links ersetzen musste, aber weder Javascript verwenden noch den Text eines Hyperlinks direkt ändern konnte, da er aus XML-Dateien kompiliert wurde. Ich konnte auch keine Pseudo-Elemente verwenden, oder sie schienen nicht zu funktionieren, als ich sie ausprobiert hatte.
Grundsätzlich habe ich den Text, den ich wollte, in eine Spannweite gebracht und den Anker-Tag darunter platziert und beides in ein div verpackt. Im Grunde habe ich den Anker-Tag per css nach oben verschoben und die Schrift transparent gemacht. Wenn Sie nun über die Spannweite schweben, "wirkt" es wie ein Link. Eine wirklich harte Art, dies zu tun, aber so können Sie einen Link mit anderem Text haben ...
Dies ist eine Geige, wie ich dieses Problem umgehen konnte
Mein HTML
<div class="field">
<span>This is your link text</span><br/>
<a href="//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 sich je nach Ihren Anforderungen ändern. Dies ist jedoch ein allgemeiner Weg, um das zu tun, was Sie verlangen.
Edit: Kann mir jemand sagen, warum dies abgelehnt wurde? Meine Lösung funktioniert ...
Im Gegensatz zu dem, was ich in jeder anderen Antwort sehe, verwenden Sie brauchen nicht Pseudoelemente, um den Inhalt einer Balise durch ein Bild zu ersetzen
div.pvw-title { /* no :after or :before required*/
content: url("your url here");
}
Ohne Tricks ist das nicht wirklich möglich. Dies ist eine Möglichkeit, die den Text durch ein Textbild ersetzt.
.pvw-title{
text-indent:-9999px;
background-image:url(text_image.png)
}
Diese Art von Dingen wird normalerweise mit Javascript ausgeführt. So geht das mit jQuery:
$('.pvw-title').text('new text');
um dies zu erreichen, müssen Sie die Zeilenhöhe der CSS erhöhen. Dadurch wird der Block oberhalb des Verborgenen sichtbar, sodass der geänderte Text nicht ausgeblendet wird.
beispiel mit use before :
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'whatever it is you want to add';
line-height: 1.5em
}