Masquer le texte à l'aide de css

J'ai une balise dans mon html comme ceci:

<h1>My Website Title Here</h1>

À l'aide de css je veux remplacer le texte avec mon logo actuel. J'ai le logo il n'y pas de problème via le redimensionnement de la balise et de mettre une image d'arrière-plan via css. Cependant, je ne peux pas comprendre comment se débarrasser du texte. Je l'ai vu faire avant que, fondamentalement, en poussant le texte en dehors de l'écran. Le problème est que je ne me souviens pas où je l'ai vu.

il y a beaucoup de vieilles réponses ici: considérons upvoting la plus récente réponse de stackoverflow.com/a/27769435/2586761 pour l'exposer

InformationsquelleAutor Micah | 2009-01-23

css

411

De cette manière:
```
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 */
}
```
Ici est une autre façon pour cacher le texte, tout en évitant l'énorme 9999 pixels que le navigateur va créer:
```
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;
}
```
- longue titres ont un problème avec cette méthode, car seul le texte avant de word-wrap est en retrait, et le W3C spec ne spécifiez pas une situation de retrait négatif, alors cela pourrait avoir des résultats imprévisibles
- Si vous utilisez cette méthode, vous devez ajouter "overflow: hidden" pour prévenir seird boîte de sélection de prise de vue vers la gauche (en particulier avec des liens)
- Si vous avez des liens dans les éléments avec le négatif text-indent, assurez-vous que vous spécifiez également "outline: none" sinon vous obtiendrez une bordure en pointillé aller au large de la gauche de l'écran.
- Ce est la bonne façon.
- Je préfère utiliser " text-indent: -9999px;' juste pour s'assurer que le texte va vraiment très loin de l'écran. Un peu de défensive de la paranoïa.
- Également ajouter "white-space: nowrap" juste pour être sur le côté sûr, si votre texte est long, que seule la première ligne est en retrait.
- De plus l'appui de l'allégation que "c'est la bonne façon", voir cette excellente question pour plus de détails au sujet de lecteur d'écran compatibilité: stackoverflow.com/questions/1755656/...
- Lev: je ne suis pas cependant, si l'outline: none; est une bonne façon de le faire. Suppression de lignes ?
- L'astuce ne semble pas fonctionner avec Opera 9
- Aussi, utiliser "text-align: left' sinon le texte ne peut pas se déplacer.
- Un possible effet secondaire de ce dans WebKit est grand couches préjudiciable aux ressources limitées de rendu (source: youtube.com/watch?v=xuMWhto62Eo @ 35:30).
- J'ai eu quelques problèmes avec Firefox pas encore complètement cacher le texte, j'ai donc modifié le texte-tiret à 200% et il a très bien fonctionné.
- qu'en ajoutant "color: transparent;" ?
- Jeffrey Zeldman suggère de ne pas utiliser -9999px; comme il est plus gourmand en ressource que de -100%; Plus d'info ci-dessous.
- Ainsi, après 7 ans de ce qui est une possibilité dans le HTML pour résoudre ce problème, est-ce encore un " bon " moyen de fixation (maintenant que nous avons obtenu HTML5)?
- Si votre texte contient des <br/>s, le texte après ces pauses rester visible
InformationsquelleAutor nicholaides
170

Pourquoi ne pas simplement utiliser:
```
h1 { color: transparent; }
```
- Pourquoi pas? Parce que Google n'aime pas cela.
- Validation (CSS 2.1): "transparent" n'est pas une valeur valide pour la "couleur" de la propriété.
- Ne fonctionne pas avec les éléments d'entrée comme le bouton dans IE6 et IE7.
- Le texte sera visible si l'utilisateur sélectionne ( CTRL+A etc. ) - Ceci semble très professionnel! Salutations Christophe
- C'est la solution la plus simple si elle répond à vos besoins (IE8+, et non sélectionnable)
- et l'avenir googlers- "CSS3 s'étend à la valeur de couleur pour inclure le "transparent" mot-clé...."
- transparent n'est pas valide. encore u peut sélectionner/mettre en surbrillance
- N'est-il pas bon si le texte est toujours une partie de Ctrl+A?
- color: transparent; travaille avec user-select: none;, à moins de remplacer la couleur.
InformationsquelleAutor nesono
149

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

CSS:
```
.hidden { font-size: 0; }
```
HTML:
```
  font-size: 0; hides text. <span class="hidden"> You can't see me :) </span>
```
- C'est exactement ce dont j'avais besoin. Je voulais cacher le contenu d'un div, mais de montrer ce qu'il a dans l'enfant s'étend (pour masquer les signes de ponctuation entre eux).
- Cela semble plus logique (lire: Moins Bizarre) méthode -- cependant, je me demande comment c'est pris en charge dans les différents navigateurs? (Je peux confirmer que cela fonctionne dans Firefox.)
- Belle pensée, mais dans IE7, il montre encore le texte très petit.
- Il indique encore le texte très petit dans un plus les navigateurs que juste IE7, ce n'est pas une complète du navigateur croix de solution.
- J'ai testé {font-size:0} truc dans Chrome 27, Firefox 17, Safari 5.1.7 pour windows, Opera 12.12, IE8, IE9, IE10 - il fonctionne dans tous les navigateurs. Cette astuce est préférable si vous ne pouvez pas définir l'image de fond d'écran sur l'élément lui-même (par exemple, parce que vous utilisez sont très serrés sprite de l'image et l'icône n'a pas assez de vide rembourrage autour d'elle), et d'avoir à utiliser des pseudo-sélecteur, par exemple, l'élément:après pour afficher l'image d'arrière-plan.
- Cela change aussi la taille de la div, donc je ne recommande pas cette.
- Pour une raison quelconque, cette astuce ajoutée de l'espace au-dessus de .myElement quand je l'ai essayé.
- je pense que cette solution est la meilleure si vous voulez prendre une partie de texte à l'écran. J'ai essayé la accepté de répondre à une solution, mais à ma grande surprise, j'ai eu une barre de défilement horizontale qui m'a à l'endroit où mon texte caché est.
InformationsquelleAutor
31

La plupart de la croix-navigateur de manière conviviale est d'écrire le code HTML comme
```
<h1><span>Website Title</span></h1>
```
ensuite utiliser CSS pour cacher la durée et de remplacer l'image
```
h1 {background:url(/nicetitle.png);}
h1 span {display:none;}
```
Si vous pouvez utiliser CSS2, alors il ya quelques meilleures façons à l'aide de la content bien, mais malheureusement, le web n'est pas à 100% encore là.
- Mais assurez-vous également de définir la largeur et la hauteur de l'attribut à celle de l'image - et assurez-vous que "padding" et "marge" sont définies, car les navigateurs ont des idées différentes quant à la façon dont beaucoup de padding/margin une balise H1 doit avoir.
- L'inconvénient ici est de savoir si les images sont désactivées, ou si un css-connaissance de bot affiche, le titre ne sera pas visible.
- Le texte important dans l'affichage aucun ne sera probablement oubliée par les robots des moteurs de recherche et les lecteurs d'écran. Utiliser du texte-tiret à la place.
- Cette habitude de faire une chose, OP pourrait ainsi supprimer le texte dans le titre. Les lecteurs d'écran ne rien faire d'autre que de l'affichage, aucun..
InformationsquelleAutor Chris Farmiloe
20

Jeffrey Zeldman suggère la solution suivante:
```
.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
```
Il devrait être moins gourmand en ressource que -9999px;

Veuillez lire tout ça ici:

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

InformationsquelleAutor chocolata
19

Cacher du texte dans un souci d'accessibilité:

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

Cette méthode dissimule efficacement le texte, mais qui lui permet de rester visible pour les lecteurs d'écran. C'est une option à envisager si l'accessibilité est un sujet de préoccupation.
```
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
```
Il est intéressant de souligner que cette classe est actuellement utilisé dans Bootstrap 3.

Si vous êtes intéressé à la lecture de l'accessibilité:
- Web Accessibility Initiative (WAI)
- MDN Accessibilité de la documentation
- Sources pour bs4 et h5bp: github.com/h5bp/html5-boilerplate/blob/master/src/css/..., github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/...
- Comparaison des techniques: css-tricks.com/the-image-replacement-museum
- Cela fonctionne bien pour l'ajout d'un élément est de lecteur d'écran uniquement; toutefois, il ne fonctionne pas avec la question d'origine lorsqu'une image est affichée par un arrière-plan de l'image spécifiée dans le css.
- Si vous ne pouvez pas ajouter un autre élément, et vous êtes coincé avec un seul élément (comme dans le cas que vous avez mentionné), puis une bonne solution consisterait à utiliser un pseudo-élément... aussi, j'ai posté cette réponse 6 ans après que la question initiale a été posée, et ma réponse était destinée à cibler un public plus large depuis que cette question semble être populaire.
InformationsquelleAutor Josh Crozier
15

Voir mezzoblue pour un bon résumé de chaque technique, avec les forces et les faiblesses, en plus de html et css.

InformationsquelleAutor darasd
7

Donc de nombreuses solutions extrêmement complexes.

Le plus simple est tout simplement à utiliser:
```
color:rgba(0,0,0,0)
```
InformationsquelleAutor Pier
6

Ne pas utiliser { display:none; } Il rend le contenu inaccessible. Vous voulez que les lecteurs d'écran pour voir votre contenu, et visuellement style 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à — seulement, pas visuellement là. Utilisation display:none, et le texte a disparu.

InformationsquelleAutor jensimmons
5
```
<style>
body {
     visibility:hidden
}
body .moz-signature p{
    visibility:visible
}
</style>
```
Ci-dessus fonctionne bien dans la dernière Thunderbird aussi.
- Notez que l'utilisation de cette méthode rend le texte de l'onu lisible par la plupart des lecteurs d'écran -- voir stackoverflow.com/questions/1755656/...
InformationsquelleAutor kamalesh
5

vous pouvez utiliser le css background-image propriété et z-index pour s'assurer que l'image reste devant le texte.

InformationsquelleAutor Jobo
5

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 pas un span ou div élément, il fonctionne parfaitement pour les liens.

InformationsquelleAutor Hans
4

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

{display:none;}

Vous pouvez trouver un exemple à ce site
- Certains des downvotes probablement avoir à faire avec les problèmes d'accessibilité -- un argument valable. Mais dans mon cas, je suis en tirant un menu à partir d'un menu de restaurant service dans un site web via son site web. Le restaurant propriétaire ne veut pas le prix affiché (mais le même service est utilisée pour imprimer la réelle menus.) C'est une situation où l'on ne veut pas les prix sur le site. Il est bon de savoir que toutes les approches possibles.
InformationsquelleAutor Andrei Krotkov
4

C'est en fait une zone mûrs pour la discussion, avec de nombreuses et subtiles techniques disponibles. Il est important que vous sélectionnez/développer une technique qui répond à vos besoins, y compris: les lecteurs d'écran, les images/css/scripts/désactivation de combinaisons, seo, etc.

Voici quelques bonnes ressources pour commencer en bas de la route de standardista image des techniques de remplacement:

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

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

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

InformationsquelleAutor willoller
3

D'utilisation de la balise pour les différents navigateur et l'utilisation de css, vous devez placer
height:0px et width:0px aussi, vous devez placer font-size:0px.

InformationsquelleAutor kedar
3

Si le point est simplement de rendre le texte à l'intérieur de l'élément invisible, définissez l'attribut de couleur de 0 opacité à l'aide d'une valeur rgba comme color:rgba(0,0,0,0); propre et simple.

InformationsquelleAutor Cafe Coder

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

}

Pourquoi est-il la hauteur de la ligne?

InformationsquelleAutor vencedor

Essayer ce code pour raccourcir et masquer le texte

CSS:

.hidetxt{

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

.hidetxt:hover { 

  visibility: hidden;
  
}

HTML:

<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 de masquer les utiliser dans votre classe css .hidetxt { visibility: hidden; }

InformationsquelleAutor omar kerr

2

Je ne me souviens pas où j'ai pris cette place, mais ont été de l'utiliser avec succès pour les âges.
```
  =hide-text()
    font: 0/0 a
    text-shadow: none
    color: transparent
```
Mon mixin est en sass cependant, vous pouvez l'utiliser de la manière qui vous convient. Pour faire bonne mesure j'ai généralement de garder un .hidden classe quelque part dans mon projet pour fixer les éléments à éviter les doubles emplois.
- Je crois que j'ai lu quelque part que cette version est préférée parce qu'un négatif text-indent entraîne le navigateur pour effectuer le rendu d'un 10000px (ou quel que soit l'exemple que vous utilisez) de long box. La modification de la police, comme dans cet exemple ne cause pas le navigateur afin de créer une grande zone qu'il veut rendre.
InformationsquelleAutor itsfreshmade

repalce contenu avec le CSS

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

InformationsquelleAutor Hossein Hajizadeh

2

vous pouvez simplement masquer votre texte par ajouter cet attribut:
```
font size: 0 !important;
```
InformationsquelleAutor Omid Ahmadyani

J'ai l'habitude d'utiliser:

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

InformationsquelleAutor Anze

1

Si nous pouvons modifier le balisage, la vie peut être plus facile, il suffit de retirer le texte et d'être heureux. Mais parfois, le balisage a été placé par le code JS ou nous ne sont pas autorisés à modifier, à tous, dommage que le css s'est avéré être la seule arme mis à notre disposition.

Nous ne pouvons pas mettre un <span> habillage du texte et de cacher l'ensemble de l'étiquette. Par ailleurs, certains navigateurs ne sont pas seulement les peaux les éléments avec display:none mais également désactive les composants à l'intérieur.

Les deux font-size:0px et color:transparent peut-être de bonnes solutions, mais certains navigateurs ne les comprends 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'aide de overflow:hidden applique notre largeur & de la hauteur. Certains navigateurs (ne sera pas les nommer... IE) peut lire la largeur et la hauteur que min-width et min-height. Je veux éviter que la boîte doit être agrandie.

InformationsquelleAutor Francisco

À l'aide de la valeur zéro pour font-size et line-height dans l'élément de la fait le truc pour moi:

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

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

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

InformationsquelleAutor HelpNeeder

1

À masquer le texte de html utiliser text-indent propriété en css
```
.classname {
 text-indent: -9999px;
 white-space: nowrap; 
}
```
/* pour le texte dynamique, vous devez ajouter un espace blanc, de sorte que votre appliquées css va pas le déranger. nowrap signifie que le texte ne sera jamais un retour à la ligne, le texte continue sur la même ligne jusqu'à ce qu'un <br> balise est rencontré

InformationsquelleAutor urmila manjarikar

L'un des moyens que j'y parvenir est d'utiliser :before ou :after. J'ai utilisé cette approche pour plusieurs années, et en particulier fonctionne très bien avec le glyphe de vecteur d'icônes.

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

InformationsquelleAutor Pegues

Cela a fonctionné pour moi avec span (knock-out de validation).

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

InformationsquelleAutor Karson

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

InformationsquelleAutor Sébastien Gicquel

-1

La meilleure réponse travaille pour le texte court, mais si le texte passe, il s'affiche dans l'image.

Une façon de le faire est de déceler les erreurs avec un jquery gestionnaire. Essayez de charger une image, si elle échoue, elle renvoie une erreur.
```
$('#logo img').error(function(){
    $('#logo').html('<h1>My Website Title Here</h1>');
});
```
Voir EXEMPLE DE CODE

InformationsquelleAutor Shanimal

-1

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

Alors que ce code peut répondre à la question, en fournissant plus de contexte sur pourquoi et/ou comment ce code répond à la question améliore sa valeur à long terme.

InformationsquelleAutor Harden Rahul

Vous devez vous connecter pour publier un commentaire.

Cacher du texte dans un souci d'accessibilité: