web-dev-qa-db-fra.com

Comment puis-je remplacer du texte par CSS?

Comment puis-je remplacer du texte par css en utilisant une méthode comme celle-ci:

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

Au lieu de (img[src*="IKON.img"]), je dois utiliser quelque chose qui peut remplacer le texte.

Je dois utiliser [] pour que cela fonctionne.

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

J'ai besoin de remplacer "Facts".

csstextreplace
238
MokiTa

Ou peut-être pourriez-vous encapsuler les «faits» autour d'un <span> comme suit:

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

Alors utilisez:

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

Obligatoire: Ceci est un hack: CSS n'est pas le bon endroit pour le faire, mais dans certaines situations - par exemple, vous avez une bibliothèque tierce dans un iframe qui ne peut être personnalisée que par CSS - ce genre de hack est la seule option.

Vous pouvez remplacer le texte via CSS. Remplaçons un bouton vert par 'hello' par un bouton rouge qui dit 'au revoir', en utilisant CSS. Voir http://jsfiddle.net/ZBj2m/274/ pour une démonstration en direct:

Voici notre bouton vert:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Cachons maintenant l'élément d'origine, mais ajoutons ensuite un autre élément de bloc:

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

Remarque:

  • Nous avons explicitement besoin de marquer ceci comme un élément de bloc, les éléments "après" sont étendus par défaut
  • Nous devons compenser l'élément d'origine en ajustant la position du pseudo-élément. 
  • Nous devons masquer l'élément d'origine et afficher le pseudo élément à l'aide de visibility. La note display: none sur l'élément d'origine ne fonctionne pas.
181
mikemaccana

Si vous souhaitez utiliser des pseudo-éléments et les laisser insérer du contenu, vous pouvez procéder comme suit. Cela ne suppose pas de connaître l'élément d'origine et ne nécessite pas de balisage supplémentaire.

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

Exemple JSFiddle

132
James van Dyke

Sur la base de la réponse de mikemaccana , Cela a fonctionné pour moi

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ Positionnement absolu

un élément qui est positionné absolument est retiré du flux et donc ne prend pas de place lors du placement d'autres éléments.

48
Steven Penny

Simple, court, efficace. Aucun html supplémentaire nécessaire.

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

Je devais le faire pour remplacer le texte du lien, autre que chez moi, pour la chapelure

SASS/MOINS

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

Vous ne pouvez pas, eh bien, vous pouvez. 

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

Cela insérera le contenu après le contenu actuel de l'élément. Cela ne le remplace pas réellement, mais vous pouvez choisir un div vide et utiliser CSS pour ajouter tout le contenu.

Mais si vous le pouvez plus ou moins, vous ne devriez pas. Le contenu réel devrait être mis dans le document. La propriété content est principalement destinée aux petits balises, comme les guillemets autour du texte devant apparaître entre guillemets.

17
GolezTrol

Essayez d'utiliser: before et: after. L'un insère du texte après le rendu de HTML, l'autre l'insère avant que HTML soit rendu. Si vous souhaitez remplacer du texte, laissez le contenu du bouton vide.

Cet exemple définit le texte du bouton en fonction de la taille de la largeur de l'écran.

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

Texte du bouton:

1) avec: avant

grand screenxxx

grand écran

2) avec: après

écran xxxbig

grand écran

12
live-love

_ {Cela ne répond peut-être pas parfaitement à la question, mais cela répondait à mes besoins et peut-être à d'autres aussi.

Donc, si vous voulez seulement montrer différents textes ou images, gardez la balise vide et écrivez votre contenu dans plusieurs attributs de données comme celui-ci <span data-text1="Hello" data-text2="Bye"></span>. Affichez-les avec l’une des pseudo-classes :before {content: attr(data-text1)}

Vous avez maintenant un tas de façons différentes de basculer entre eux. Je les ai utilisés en combinaison avec des requêtes de médias pour une approche de conception réactive permettant de changer les noms de ma navigation en icônes. 

Démonstration de jsfiddle et exemples

9
Robbendebiene

Cela a fonctionné pour moi avec le texte en ligne. Testé en FF, Safari, Chrome et 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; 
}
9
Noel Williams

J'utilise cette astuce:

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

J'ai même utilisé cela pour gérer l'internationalisation des pages en changeant simplement une classe de base ...

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

J'ai eu plus de chance en réglant le font-size: 0 de l'élément extérieur et le font-size du sélecteur :after à tout ce dont j'avais besoin.

8
jerome

Remplacement de texte avec pseudo-éléments et visibilité CSS

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

À l'aide d'un pseudo-élément, cette méthode ne nécessite pas de connaissance de l'élément d'origine ni de balisage supplémentaire.

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

Cela implémente une case à cocher en tant que bouton indiquant Oui ou Non en fonction de son état "coché". Donc, il montre une façon de remplacer du texte en utilisant CSS sans avoir à écrire de code.

Il se comportera toujours comme une case à cocher pour renvoyer (ou ne pas renvoyer) une valeur POST, mais du point de vue de l'affichage, il ressemble à un bouton bascule.

Les couleurs ne vous conviennent peut-être pas, elles ne sont là que pour illustrer un point.

Le HTML est:

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

... et le CSS est:

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

Je l'ai seulement essayé sur Firefox, mais c'est du CSS standard, donc ça devrait marcher ailleurs.

2
Steve Douglas

Un problème me obligeait à remplacer le texte du lien, mais je ne pouvais pas utiliser javascript ni modifier directement le texte d'un lien hypertexte, car il était compilé à partir de XML. De plus, je ne pouvais pas utiliser de pseudo-éléments, ou ils ne semblaient pas fonctionner quand je les avais essayés.

Fondamentalement, j'ai mis le texte que je voulais dans une portée et j'ai placé la balise d'ancrage en dessous et enveloppé les deux dans une div. En gros, j'ai déplacé la balise d'ancrage via css, puis j'ai rendu la police transparente. Maintenant, lorsque vous survolez la plage, il "agit" comme un lien. Une façon très astucieuse de faire cela, mais c'est comme ça que vous pouvez avoir un lien avec un texte différent ...

Ceci est un violon de la façon dont j'ai contourné ce problème

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

Mon CSS

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

Le CSS devra changer en fonction de vos besoins, mais c’est une façon générale de faire ce que vous demandez.

Edit: Quelqu'un peut-il me dire pourquoi cela a été voté? Ma solution fonctionne ...

1
AlmightyWhy

Contrairement à ce que je vois dans toutes les autres réponses, vous n'avez pas besoin d'utiliser des pseudo-éléments pour remplacer le contenu d'une balise par une image

div.pvw-title { /* no :after or :before required*/
content: url("your url here");
}
1
Estecka

Ce n'est pas vraiment possible sans astuces. Voici une méthode qui fonctionne en remplaçant le texte par une image de texte.

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

Ce genre de chose se fait généralement avec Javascript. Voici comment faire avec jQuery:

$('.pvw-title').text('new text');
0
Nathan Manousos

la façon de faire ce travail est d'ajouter line-height au css. cela fera apparaître le bloc au-dessus de ce qui est caché, ainsi le texte modifié ne sera pas caché.

exemple avec use before :

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'whatever it is you want to add';
  line-height: 1.5em
}
0
Tal Talmon