css

Hoe kan ik tekst vervangen door CSS met een methode als deze:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

In plaats van ( img[src*="IKON.img"]), moet ik iets gebruiken dat tekst kan vervangen.

Ik moet []gebruiken om het werkend te krijgen.

<div class="pvw-title">Facts</div>

Ik moet “Feiten” vervangen.

Antwoord 1, autoriteit 100%

Of misschien kunt u ‘Feiten’ als volgt rond een <span>plaatsen:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

<div class="pvw-title"><span>Facts</span></div>

Antwoord 2, autoriteit 83%

Verplicht: dit is een hack: CSS is niet de juiste plaats om dit te doen, maar in sommige situaties – u hebt bijvoorbeeld een bibliotheek van derden in een iframe die alleen kan worden aangepast door CSS – dit soort hack is de enige optie.

Je kunt tekst vervangen via CSS. Laten we een groene knop met het woord ‘hallo’ vervangen door een rode knop met het woord ‘tot ziens’, met behulp van CSS.

Vroeger:

Na:

Zie http://jsfiddle.net/ZBj2m/274/voor een live demo:

Hier is onze groene knop:

<button>Hello</button>
button {
  background-color: green;
  color: black;
  padding: 5px;
}

Laten we nu het originele element verbergen, maar daarna nog een blokelement toevoegen:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Opmerking:

We moeten dit expliciet markeren als een blokelement, ‘na’-elementen zijn standaard inline
We moeten het oorspronkelijke element compenseren door de positie van het pseudo-element aan te passen.
We moeten het originele element verbergen en het pseudo-element weergeven met visibility. Opmerking display: noneop het originele element werkt niet.

Antwoord 3, autoriteit 55%

Als u pseudo-elementen wilt gebruiken en ze inhoud wilt laten invoegen, kunt u het volgende doen. Het veronderstelt geen kennis van het originele element en vereist geen extra opmaak.

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

JSFiddle-voorbeeld

Antwoord 4, autoriteit 19%

Gebaseerd op
het antwoord van mikemaccana,
dit werkte voor mij

button {
  position: absolute;
  visibility: hidden;
}
button:before {
  content: "goodbye";
  visibility: visible;
}

<button>original</button>

Antwoord 5, autoriteit 10%

Dit is eenvoudig, kort en effectief. Er is geen extra HTML nodig.

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

Ik moest dit doen voor het vervangen van linktekst, anders dan thuis, voor WooCommercebroodkruimels

Sass/Minder

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

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;
}

Antwoord 6, autoriteit 8%

Dat kun je niet, nou ja, dat kan.

.pvw-title:after {
  content: "Test";
}

Hiermee wordt inhoud ingevoegd nade huidige inhoud van het element. Het vervangt het niet echt, maar je kunt kiezen voor een lege div en CSS gebruiken om alle inhoud toe te voegen.

Maar hoewel je het min of meer kunt, zou je het niet moeten doen. De werkelijke inhoud moet in het document worden geplaatst. De eigenschap content is voornamelijk bedoeld voor kleine opmaak, zoals aanhalingstekens rond tekst die geciteerd moet worden.

Antwoord 7, autoriteit 4%

Probeer :beforeen :afterte gebruiken. De ene voegt tekst in nadat HTML is weergegeven en de andere voegt tekst in voordat HTML is weergegeven. Als u tekst wilt vervangen, laat u de inhoud van de knop leeg.

Dit voorbeeld stelt de knoptekst in op basis van de grootte van de schermbreedte.

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

Knoptekst:

Met :before

groot schermxxx

groot scherm
Met :after

xxxgroot scherm

groot scherm

Antwoord 8, autoriteit 4%

Als je gewoon verschillende teksten of afbeeldingen wilt laten zien, houd de tag leeg en schrijf je inhoud in meerdere data-attributenzoals dat <span data-text1="Hello" data-text2="Bye"></span>.
Geef ze weer met een van de pseudo-klassen :before {content: attr(data-text1)}

Je hebt nu een heleboel verschillende manieren om ertussen te schakelen. Ik gebruikte ze in combinatie met mediaquery’s voor een responsieve ontwerpbenadering om de namen van mijn navigatie te veranderen in pictogrammen.

jsfiddle-demonstratie en voorbeelden

_{Het is misschien niet het perfecte antwoord op de vraag, maar het voldeed aan mijn behoeften en misschien ook aan anderen.}

Antwoord 9, autoriteit 3%

Ik had meer geluk met het instellen van de font-size: 0van het buitenste element, en de font-sizevan de :afterselector voor alles wat ik nodig had.

Antwoord 10, autoriteit 3%

Dit werkte voor mij met inline tekst. Het is getest in Firefox, Safari, Chrome en 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;
}

Antwoord 11, autoriteit 3%

Tekstvervanging met pseudo-elementen en CSS-zichtbaarheid

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.";
}

Antwoord 12, autoriteit 3%

Ik gebruik deze truc:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

Ik heb dit zelfs gebruikt om de internationalisering van pagina’s af te handelen door gewoon een basisklasse te wijzigen…

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

Antwoord 13, autoriteit 2%

De eenvoudigste manier die ik heb gevonden, is door het element font-size: 0pxte maken en het vervolgens te overschrijven met een willekeurige lettergrootte bij het maken van :afterpseudo. Voorbeeld hieronder:

.pvw-title { 
    font-size:0px;
}
.pvw-title:after {
        content: "Hello";
        font-size:15px !important;
}

Antwoord 14

Met behulp van een pseudo-element vereist deze methode geen kennis van het originele element en vereist geen extra opmaak.

#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;
}

Antwoord 15

Dit implementeert een selectievakje als een knop die ja of nee toont, afhankelijk van de ‘gecontroleerde’ staat. Het toont dus een manier om tekst te vervangen door CSS te gebruiken zonder een code te hoeven schrijven.

Het gedraagt zich nog steeds als een selectievakje voor zover het terugkeert (of niet terug te keren) een postwaarde, maar vanuit een weergavepunt ziet het eruit als een schakelknop.

De kleuren zijn misschien niet in uw smaak, ze zijn alleen daar om een punt te illustreren.

De HTML is:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

… en de CSS is:

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

Ik heb het alleen in Firefox geprobeerd, maar het is standaard CSS, dus het zou ergens anders moeten werken.

Antwoord 16

Ik had een probleem waarbij ik de tekst van de link moest vervangen, maar ik kon geen JavaScript gebruiken en ik kon de tekst van een hyperlink ook niet rechtstreeks wijzigen omdat deze vanuit XML was gecompileerd. Ik kon ook geen pseudo-elementen gebruiken, of ze leken niet te werken toen ik ze had geprobeerd.

Kortom, ik plaatste de gewenste tekst in een span en plaatste de ankertag eronder en wikkelde beide in een div. Ik heb de ankertag in feite via CSS naar boven verplaatst en vervolgens het lettertype transparant gemaakt. Als u nu over het bereik zweeft, “werkt” het als een link. Een echt hacky manier om dit te doen, maar dit is hoe je een link met andere tekst kunt hebben…

Dit is een raadsel hoe ik dit probleem heb opgelost

Mijn 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>

Mijn CSS

div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

De CSS moet worden gewijzigd op basis van uw vereisten, maar dit is een algemene manier om te doen wat u vraagt.

Antwoord 17

Ik heb een dergelijke oplossing gevonden waarbij een woord, “Donker”, zou worden ingekort tot alleen “D” op een kleinere schermbreedte. In principe maak je gewoon de lettergrootte van de originele inhoud 0 en heb je de verkorte vorm als een pseudo-element.

In dit voorbeeld gebeurt de wijziging in plaats daarvan met de muisaanwijzer:

span {
  font-size: 12px;
}
span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}
span:hover {
  font-size: 0px;
}
span:hover:after {
  display: inline;
}

<span>Dark</span>

Antwoord 18

Na acht jaar stond ik voor dezelfde uitdaging toen ik de Stijlvollebrowserextensie probeerde te gebruiken om iets te veranderen op een website (niet de mijne). En deze keer heb ik het laten werken door naar de broncode te kijken met “inspect element” en op basis daarvan de CSS-code te maken.

Zo zag het er vroeger uit:

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

Antwoord 19

In tegenstelling tot wat ik in elk ander antwoord zie, hoef je geenpseudo-elementen te gebruiken om de inhoud van een tag te vervangen door een afbeelding

<div class="pvw-title">Facts</div>
    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

Antwoord 20

Nou, zoals velen zeiden, is dit een hack. Ik zou echter graag een meer up-to-date hack toevoegen, die gebruik maakt van flexboxen rem, d.w.z.

U wilt deze te wijzigen tekst niet handmatig positioneren, daarom wilt u profiteren van flexbox
U wilt geen paddingen/of margingebruiken voor de tekst expliciet met behulp van px, wat voor verschillende schermformaten op verschillende apparaten en browsers kunnen verschillende output geven

Hier is de oplossing, kortom flexboxzorgt ervoor dat het automatisch perfect wordt gepositioneerd en remis een meer gestandaardiseerd (en geautomatiseerd) alternatief voor pixels.

CodeSandboxmet onderstaande code en uitvoer in de vorm van een screenshot, lees a.u.b. een noteonder de code!

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;
}

Opmerking: voor verschillende tags die je nodig zou kunnen hebben verschillende waarden van rem, dit is gerechtvaardigd voor h1en alleen op grote schermen. Maar met @mediakunt u gemakkelijk deze uit te breiden naar mobiele apparaten.

Antwoord 21

Om gebruiken na en verberg de originele inhoud, kunt u deze hack te gebruiken:

.pvw-title {
  font-size: 0;
}
.pvw-title:after {
  font-size: 1rem;
  content: 'I am a totally different piece of text!';
}

<div class="pvw-title">Facts</div>

Antwoord 22

Dit is niet echt mogelijk zonder trucs. Hier is een manier die werkt door de tekst te vervangen door een afbeelding van de tekst.

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

Dit soort dingen wordt meestal gedaan met JavaScript. Hier is hoe het kan worden gedaan met jQuery:

$('.pvw-title').text('new text');

Antwoord 23

De manier om dit werk te laten werken is om lijnhoogte toe te voegen aan het CSS-gehalte. Hierdoor kan het blok boven de verborgen worden gezien, dus dit zal de gewijzigde tekst niet verbergen.

Voorbeeld met gebruik vóór :

.pvw-title span {
  display: none;
}
.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

Antwoord 24

voorbeeld

<!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>

output

Devnote is developer answer solve. devnote.in

Previous articleHoe stel ik programmatisch de waarde van een select box-element in met JavaScript?

Next articleInvoerbuffer in C wissen in C?

Hoe kan ik tekst vervangen door CSS?