Ocultar texto usando css

Tengo una etiqueta en mi html como esta:

My Website Title Here

Usando CSS, quiero reemplazar el texto con mi logotipo real. Tengo el logo sin problema cambiando el tamaño de la etiqueta y poniendo una imagen de fondo en css. Sin embargo, no puedo descifrar cómo deshacerme del texto. Lo he visto antes, básicamente, sacando el texto de la pantalla. El problema es que no puedo recordar dónde lo vi.

Esta es una forma:

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

Aquí hay otra forma de ocultar el texto, evitando el enorme cuadro de 9999 píxeles que creará el navegador:

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

¿Por qué no usar simplemente:

 h1 { color: transparent; } 

Simplemente agregue font-size: 0; a su elemento que contiene texto.

 .hidden { font-size: 0; } 
  font-size: 0; hides text.  

La forma más fácil de utilizar varios navegadores es escribir el HTML como

 

Website Title

luego usa CSS para ocultar el lapso y reemplazar la imagen

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

Si puede usar CSS2, hay algunas formas mejores de usar la propiedad de content , pero desafortunadamente la web todavía no está al 100%.

Jeffrey Zeldman sugiere la siguiente solución:

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

Debería -9999px; menos recursos que -9999px;

Por favor, lea todo al respecto aquí:

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

Ver mezzoblue para obtener un buen resumen de cada técnica, con fortalezas y debilidades, además de ejemplos html y css.

Ocultar texto con accesibilidad en mente:

Además de las otras respuestas, aquí hay otro enfoque útil para ocultar el texto.

Este método oculta efectivamente el texto, pero le permite permanecer visible para los lectores de pantalla. Esta es una opción para considerar si la accesibilidad es una preocupación.

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

Vale la pena señalar que esta clase se utiliza actualmente en Bootstrap 3 .


Si le interesa leer sobre accesibilidad:

  • Iniciativa de accesibilidad web (WAI)

  • Documentación de accesibilidad de MDN

No use { display:none; } { display:none; } Hace que el contenido sea inaccesible. Desea que los lectores de pantalla vean su contenido y lo diseñen visualmente al reemplazar el texto con una imagen (como un logotipo). Mediante el uso de text-indent: -999px; o un método similar, el texto todavía está allí, simplemente no es visualmente allí. Use display:none , y el texto ya no está.

Tantas soluciones complicadas.

El más fácil es simplemente usar:

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

puede usar la propiedad de background-image css y z-index para asegurarse de que la imagen permanezca en frente del texto.

Por qué no usas:

 
  • bla
  • a { opacity: 0.0; font-size: 1px; } li { background-image: url('test.jpg'); }

    Si no tiene ningún elemento span o div, funciona perfectamente para enlaces.

    La respuesta es crear un lapso con la propiedad

    {display:none;}

    Puedes encontrar un ejemplo en este sitio

    Esta es en realidad un área madura para la discusión, con muchas técnicas sutiles disponibles. Es importante que seleccione / desarrolle una técnica que satisfaga sus necesidades, incluyendo: lectores de pantalla, combinaciones de imágenes / css / scripting on / off, seo, etc.

    Aquí hay algunos buenos recursos para comenzar en el camino de las técnicas de reemplazo de imágenes estándar:

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

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

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

      

    Lo anterior funciona bien en la última Thunderbird también.

    Use la etiqueta Condition para diferentes navegadores y use css para colocar la height:0px y width:0px También debe colocar font-size:0px .

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

    Si el objective es simplemente hacer que el texto dentro del elemento sea invisible, configure el atributo de color para que tenga 0 opacidad usando un valor rgba como color:rgba(0,0,0,0); limpio y simple

    Pruebe este código para acortar y ocultar el texto

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

    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

    Reparar el contenido con el CSS

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

    Usualmente uso:

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

    Si podemos editar el marcado, la vida puede ser más fácil, simplemente elimine el texto y sea feliz. Pero a veces el marcado fue colocado por código JS o simplemente no podemos editarlo, demasiado mal css convertido en la única arma puesta a nuestra disposición.

    No podemos colocar un envolviendo el texto y ocultar toda la etiqueta. Por cierto, algunos navegadores no solo ocultan elementos con display:none sino que también desactiva los componentes internos.

    Tanto font-size:0px como el color:transparent pueden ser buenas soluciones, pero algunos navegadores no las entienden. No podemos confiar en ellos.

    Yo sugiero:

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

    Uso de overflow:hidden impone nuestro ancho y alto. Algunos navegadores (no los nombrarán … IE ) pueden leer ancho y alto como min-width y min-height . Quiero evitar que la caja se agrande.

    Utilizar el valor cero para font-size de font-size y line-height en el elemento me sirve de truco:

       Invisible Text  

    Para ocultar texto de html use la propiedad text-indent en css

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

    / * para texto dynamic necesita agregar espacio en blanco, por lo que su css aplicado no molestará. nowrap significa que el texto nunca se ajustará a la siguiente línea, el texto continúa en la misma línea hasta que se encuentre una etiqueta

    Una de las formas en que logro esto es usar :before o :after . He usado este enfoque durante varios años, y particularmente funciona muy bien con los icons de vector de glifo.

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

    Esto funcionó para mí con span (validación knockout).

     This field is required. .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; } 

    Una solución que funciona para mí:

    HTML

     
    My Website Title Here

    CSS

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

    No recuerdo dónde recogí esto, pero lo he estado utilizando con éxito durante siglos.

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

    Mi mixin está en silencio, pero puedes usarlo de la forma que consideres más conveniente. Por si fuera poco, generalmente guardo una clase .hidden en algún lugar de mi proyecto para adjuntar elementos a fin de evitar la duplicación.

    La mejor respuesta funciona para texto corto, pero si el texto se cierra, simplemente aparece en la imagen.

    Una forma de hacerlo es detectar errores con un manejador jquery. Intenta cargar una imagen; si falla, arroja un error.

     $('#logo img').error(function(){ $('#logo').html('

    My Website Title Here

    '); });

    Vea el CÓDIGO DE MUESTRA

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