suspensivos - truncar texto css

Ocultar texto usando css

Question

Tengo una etiqueta en mi html así:

<h1>My Website Title Here</h1>

Usando css quiero reemplazar el texto con mi logo real. Tengo el logotipo allí no hay problema al cambiar el tamaño de la etiqueta y poner una imagen de fondo a través de css. Sin embargo, no puedo averiguar cómo deshacerme del texto. Lo he visto antes, básicamente, empujando el texto de la pantalla. El problema es que no recuerdo dónde lo vi.

Answer 1

Ocultar texto con accesibilidad en mente:

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

Este método oculta efectivamente el texto, pero permite que permanezca 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 estás interesado en leer sobre accesibilidad:

• Iniciativa de Accesibilidad Web (WAI)

• Documentación de accesibilidad MDN

Answer 2

¿Por qué no simplemente usar:

h1 { color: transparent; }

Answer 3

¿Por qué no usas?

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

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

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

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

Answer 4

Esta es en realidad un área madura para el debate, 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 el camino de las técnicas de reemplazo de imagen standardista:

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

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

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

Answer 5

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

Esta es otra forma de ocultar el texto y evitar la enorme caja 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;
}

Answer 6

Esto funcionó para mí con lapso (validación eliminatoria).

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

Answer 7

Intenta este código para acortar y ocultar texto

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

o para ocultar el uso en su clase css .hidetxt { visibility: hidden; } .hidetxt { visibility: hidden; }

Answer 8

Jeffrey Zeldman sugiere la siguiente solución:

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

Debería ser menos intensivo en recursos que -9999px;

Por favor lea todo sobre esto aquí:

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

Answer 9

La forma más amigable para todos los navegadores es escribir el HTML como

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

luego usa CSS para ocultar el lapso y reemplazar la imagen

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

Si puedes usar CSS2, entonces hay algunas formas mejores de usar la propiedad de content , pero desafortunadamente la web aún no está al 100%.

Answer 10

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

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

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

Ver código de muestra

Answer 11

La respuesta es crear un lapso con la propiedad.

{display:none;}

Puedes encontrar un ejemplo en este sitio.

Answer 12

No recuerdo dónde recogí esto, pero lo he usado con éxito durante años.

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

Mi mezcla está en sass, sin embargo, puedes usarla de la forma que creas conveniente. Por si .hidden generalmente mantengo una clase .hidden en algún lugar de mi proyecto para adjuntarla a elementos para evitar la duplicación.

Answer 13

No utilice { display:none; } { display:none; } Hace que el contenido sea inaccesible. Desea que los lectores de pantalla vean su contenido y lo diseñen visualmente reemplazando el texto con una imagen (como un logotipo). Mediante el uso de text-indent: -999px; o un método similar, el texto sigue ahí, pero no visualmente. Use display:none , y el texto desaparece.

Answer 14

Para ocultar texto de html, use la propiedad de sangría de texto en css.

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

/ * para texto dinámico, necesita agregar espacios en blanco, para que su CSS aplicado no perturbará. 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 encuentra una etiqueta <br>

Answer 15

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

Answer 16

Si podemos editar el marcado, la vida puede ser más fácil, simplemente elimine el texto y sea feliz. Pero a veces el código JS lo colocó o simplemente no se nos permite editarlo. Lástima que el css se convierta en la única arma que tenemos a nuestra disposición.

No podemos colocar un <span> envolviendo el texto y ocultar la etiqueta completa. Por cierto, algunos navegadores no solo ocultan los elementos con display:none sino que también deshabilitan 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 */
}

Usando overflow:hidden refuerza nuestro ancho y alto. Algunos navegadores (no los nombrarán ... IE ) pueden leer el ancho y el alto como min-width y min-height . Quiero evitar que la caja sea ampliada.

Answer 17

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

.hidden { font-size: 0; }

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

Answer 18

Suelo usar:

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

Answer 19

Tantas soluciones complicadas.

La más fácil es simplemente usar:

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

Answer 20

Una de las formas en que lo logro es usar :before o :after . He utilizado este enfoque durante varios años, y funciona especialmente bien con los iconos vectoriales de glifos.

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

Answer 21

Una solución que me funciona:

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

Answer 22

Usar el valor cero para font-size de font-size y line-height en el elemento hace el truco para mí:

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

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

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

Answer 23

Use la etiqueta de Condición para diferentes navegadores y usando css tiene que colocar el height:0px y el width:0px también tiene que colocar font-size:0px .

Answer 24

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

Answer 25

puede utilizar la propiedad de background-image css y z-index para asegurarse de que la imagen se mantenga frente al texto.

Answer 26

volver a complacer el contenido con el CSS

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

Answer 27

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

Lo anterior funciona bien también en el último Thunderbird.

Answer 28

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

}

Answer 29

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