Estoy tratando de ocultar un texto dentro de un elemento <li> usando CSS configurando text-indent: -999px;.
Por alguna razón, esto no funciona cuando configuro la dirección del documento en "rtl" (de derecha a izquierda, mi sitio está en hebreo).
Cuando la dirección es "rtl", el texto aún muestra ...
¿Alguien sabe por qué y una forma de evitarlo?ocultar texto con "texto-sangría"
es un viejo truco, que no es la forma óptima de ocultar texto. ¿Por qué no usar visibility:hidden en su lugar?
Probablemente se trata de un intento de utilizar una imagen ** de fondo como contenido y proporcionar texto real para lectores de pantalla en lugar de utilizar un elemento '' con un atributo 'alt'. –
Quentin
no puedo usar la visibilidad: oculta porque solo necesito que el texto se vaya. no es el elemento completo en el que se coloca el texto. alguna solución? – Crippletoe
también, estoy usando una imagen de fondo allí. bastante correcto! – Crippletoe
Puede usar la altura de línea especificando un valor grande, digamos 100px para un contenedor alto de 30px.
solo funciona si su contenedor tiene un tamaño limitado. es posible que deba establecer específicamente la altura si aún no lo está.
¿Qué hay sobre el ajuste direction:ltr en los elementos que está tratando de dar negativo text-indent?
Demostración:jsfiddle.net/Marcel/aJBnN/1/
+1 esa es la respuesta correcta: funciona y solo cambia una propiedad que es irrelevante (ya que el texto se oculta) – ori
Junto con text-indent: -9999px trate de usar display: block;. Lo resolvió para mí.
Además, si necesita flotar los elementos li horizontalmente (por ejemplo, un menú horizontal), use float: left;.
Intente configurar la alineación del texto para que coincida con la dirección en la que está sangrando el texto.
Por ejemplo, si utiliza LTR y desea aplicar sangría al texto de manera negativa, además de agregar display: block, también debe agregar la alineación a la izquierda.
No estoy seguro de RTL, pero parece lógico que debe sangrarlo positivamente y usar la alineación correcta.
He encontrado la mejor manera es hacer el texto un color transparente:
de color: RGBA (0,0,0,0);
Nota: Este error todavía existe en Firefox 12 (valor de texto guión se ignora en RTL)
text-align: right; funciona para mí
color: transparent;
o
font-size:0px;
prefiero esta solución:
.hide_text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
Mi problema era con text-align. En caso de que modifique el modo de alineación del elemento o elemento (s) principal (es) envolviéndolo a la izquierda, debe dar un índice negativo para el texto-sangrado. De lo contrario, debe dar un valor positivo.
.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}
De lo contrario
.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}
Nota: Creo que eso no funciona en IE6. + http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/ – aviraldg
puede rellenar/desbordamiento: oculto para ocultar su contenido, esto funciona en todos los navegadores y en cualquier dirección de texto. como este: 'width: 0; altura: 0; relleno: 400px 0 0 200px; desbordamiento: oculto ' – meo
si no obtiene una buena solución, siempre puede probar otras técnicas de ocultación de texto: D http://css-tricks.com/css-image-replacement/ –