Masquer le texte à l'aide de CSS

J'ai une balise dans mon html comme ceci:

<h1>My Website Title Here</h1>

En utilisant css, je veux remplacer le texte par mon logo actuel. J'ai le logo sans problème via le redimensionnement de la balise et la mise en place d'une image d'arrière-plan via css. Cependant, je ne sais pas comment me débarrasser du texte. J'ai déjà vu cela avant en poussant le texte hors de l'écran. Le problème est que je ne me souviens pas où je l'ai vu.

C'est une façon:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

Voici une autre façon de masquer le texte tout en évitant l'énorme boîte de 9999 pixels que le navigateur créera:

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Pourquoi ne pas simplement utiliser:

h1 { color: transparent; }

Ajoutez simplement font-size: 0;à votre élément qui contient du texte.

.hidden { font-size: 0; }

  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>

La manière la plus conviviale pour tous les navigateurs consiste à écrire le code HTML sous la forme

<h1><span>Website Title</span></h1>

puis utilisez CSS pour masquer la plage et remplacer l'image

h1 {background:url(/nicetitle.png);}
h1 span {display:none;}

Si vous pouvez utiliser CSS2, il existe de meilleures façons d'utiliser la contentpropriété, mais malheureusement, le Web n'est pas encore à 100%.

Masquer le texte en gardant à l'esprit l'accessibilité:

En plus des autres réponses, voici une autre approche utile pour masquer du texte.

Cette méthode masque efficacement le texte, tout en lui permettant de rester visible pour les lecteurs d'écran. Il s'agit d'une option à considérer si l'accessibilité est un problème.

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

Il convient de noter que cette classe est actuellement utilisée dans Bootstrap 3 .

Si vous êtes intéressé à lire sur l'accessibilité:

• Initiative d'accessibilité Web (WAI)

• Documentation d'accessibilité MDN

Jeffrey Zeldman suggère la solution suivante:

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Il devrait être moins gourmand en ressources que -9999px;

Veuillez tout lire ici:

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Voir mezzoblue pour un joli résumé de chaque technique, avec ses forces et ses faiblesses, ainsi que des exemples html et css.

Tant de solutions compliquées.

Le plus simple est simplement d'utiliser:

color:rgba(0,0,0,0)

vous pouvez simplement masquer votre texte en ajoutant cet attribut:

font size: 0 !important;

Ne pas utiliser { display:none; }Cela rend le contenu inaccessible. Vous voulez que les lecteurs d'écran voient votre contenu et le stylisent visuellement en remplaçant le texte par une image (comme un logo). En utilisant text-indent: -999px;ou une méthode similaire, le texte est toujours là - mais pas visuellement là. Utilisez display:noneet le texte a disparu.

<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>

Ce qui précède fonctionne bien également dans le dernier Thunderbird.

vous pouvez utiliser la background-imagepropriété css et z-indexvous assurer que l'image reste devant le texte.

Pourquoi n'utilisez-vous pas:

<li><a href="#">bla</a></li>

a {
    opacity: 0.0;
    font-size: 1px;
}

li {
    background-image: url('test.jpg');
}

Si vous n'avez aucun élément span ou div, cela fonctionne parfaitement pour les liens.

La réponse est de créer un span avec la propriété

{display:none;}

Vous pouvez trouver un exemple sur ce site

Il s'agit en fait d'un domaine propice à la discussion, avec de nombreuses techniques subtiles disponibles. Il est important que vous sélectionniez / développiez une technique qui réponde à vos besoins, notamment: lecteurs d'écran, combinaisons images / css / script on / off, référencement, etc.

Voici quelques bonnes ressources pour démarrer sur la voie des techniques de remplacement d'image standardistes:

http://faq.css-standards.org/Image_Replacement

http://www.alistapart.com/articles/fir

http://veerle.duoh.com/blog/links/#l-10

Utilisez la balise Condition pour différents navigateurs et en utilisant CSS, vous devez placer height:0pxet width:0pxvous devez également placer font-size:0px.

Si le but est simplement de rendre le texte à l'intérieur de l'élément invisible, définissez l'attribut color sur 0 opacité en utilisant une valeur rgba telle que color:rgba(0,0,0,0);clean et simple.

Je ne me souviens pas où je l'ai ramassé, mais je l'utilise avec succès depuis des lustres.

  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent

Mon mixin est en vogue mais vous pouvez l'utiliser comme bon vous semble. Pour faire bonne mesure, je garde généralement une .hiddenclasse quelque part dans mon projet à attacher aux éléments pour éviter les doublons.

h1 {
    text-indent: -3000px; 
    line-height: 3000px;
    background-image: url(/LOGO.png);
    height: 100px; width:  600px;  /* height and width are a must */

}

Essayez ce code pour raccourcir et masquer le texte

.hidetxt{

  width: 346px;
  display: table-caption;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: no-drop;
  
}

.hidetxt:hover { 

  visibility: hidden;
  
}

<div class="hidetxt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when</p>
</div>

ou pour masquer l'utilisation dans votre classe css .hidetxt { visibility: hidden; }

repalcez le contenu avec le CSS

 h1{  font-size: 0px;}
 h1:after {
    content: "new content";
    font-size: 15px;
  }

J'utilise habituellement:

span.hide
{
  position:fixed;
  right:-5000px;
}

Si nous pouvons modifier le balisage, la vie peut être plus facile, il suffit de supprimer le texte et d'être heureux. Mais parfois, le balisage a été placé par du code JS ou nous ne sommes tout simplement pas autorisés à le modifier du tout, trop mauvais CSS s'est avéré être la seule arme mise à notre disposition.

Nous ne pouvons pas placer un <span>habillage du texte et masquer la balise entière. Soit dit en passant, certains navigateurs masquent non seulement les éléments display:nonemais désactivent également les composants à l'intérieur.

Les deux font-size:0pxet color:transparentpeuvent être de bonnes solutions, mais certains navigateurs ne les comprennent pas. Nous ne pouvons pas compter sur eux.

Je suggère:

h1 {
  background-image: url(/LOGO.png);  /* Our image */
  text-indent: -3000px;  /* Send text out of viewable area */
  height: 100px; width: 600px;  /* height and width are a must, agree */
  overflow:hidden;  /* make sure our size is respected */
}

L'utilisation overflow:hiddenrenforce notre largeur et notre hauteur. Certains navigateurs (ne les nommeront pas ... IE ) peuvent lire la largeur et la hauteur au fur min-widthet à mesure min-height. Je souhaite empêcher l'agrandissement de la boîte.

L'utilisation de la valeur zéro pour font-sizeet line-heightdans l'élément fait l'affaire pour moi:

<style>
    .text {
        display: block;
        width: 200px;
        height: 200px;

        font-size: 0;
        line-height: 0;
    }
</style>

<span class="text">
    Invisible Text
</span>

Pour masquer du texte en html, utilisez la propriété text-indent dans css

.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}

/ * pour le texte dynamique, vous devez ajouter un espace blanc, afin que votre CSS appliqué ne dérange pas. nowrap signifie que le texte ne passera jamais à la ligne suivante, le texte continue sur la même ligne jusqu'à ce qu'une <br>balise soit rencontrée

L'une des façons d'y parvenir est d'utiliser :beforeou :after. J'utilise cette approche depuis plusieurs années et fonctionne particulièrement bien avec les icônes vectorielles de glyphe.

h1 {
    position: relative;
    text-indent: -9999px;                 /* sends the text off-screen */
    }
h1:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 600px;
    height: 100px;
    content: ' ';
    background: transparent url(/the_img.png) 0 0 no-repeat;
    }

Cela a fonctionné pour moi avec span (validation par élimination directe).

<span class="validationMessage">This field is required.</span>

.validationMessage {
    background-image: url('images/exclamation.png');
    background-repeat: no-repeat;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    vertical-align: top;

    /* Hide the text. */
    display: inline-block;
    overflow: hidden;
    font-size: 0px;
}

Une solution qui fonctionne pour moi:

HTML

<div class="website_title"><span>My Website Title Here</span></div>

CSS

.website_title {
    background-image: url('../images/home.png');
    background-repeat: no-repeat;
    height: 18px;
    width: 16px;
}

.website_title span {
    visibility: hidden;
}

La meilleure réponse fonctionne pour le texte court, mais si le texte s'enroule, il apparaît simplement dans l'image.

Une façon de le faire est de détecter les erreurs avec un gestionnaire jquery. Essayez de charger une image, si elle échoue, elle génère une erreur.

$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});

Voir EXEMPLE DE CODE

h1{
   background:url("../images/logo.png") no-repeat;
   height:180px;
   width:200px;
   display:inline-block;
   font-size:0px !important;
   text-intent:-9999999px !important;
   color:transparent !important;
 }