Estoy tratando de ocultar algo de texto dentro de un <li> elemento con CSS mediante el establecimiento de text-indent: -999px;.

Por alguna razón esto no funciona cuando pongo la dirección del documento a "rtl" (de derecha a izquierda – mi sitio está en hebreo).

Cuando la dirección es “rtl”, el texto muestra aún…

Nadie sabe por qué, y una forma de evitar esto?

Nota: creo que eso no funciona en IE6. + 456bereastreet.com/archive/200510/…
usted podría relleno / overflow: hidden para ocultar su contenido, esto funciona en cualquier navegador y en cualquier dirección del texto. como este: ancho:0; height:0; padding: 400px 0 0 200px; overflow: hidden
si usted no recibe una buena solución, siempre se puede intentar otro texto ocultar técnicas 😀 css-tricks.com/css-image-replacement
voy a darle un tiro.
¿Has probado un positivo text-indent?

OriginalEl autor Crippletoe | 2010-05-08

10 Comentarios

  1. 18

    Junto con text-indent: -9999px trate de usar display: block;. Se resolvió para mí.

    Además, si usted necesita el li elementos para flotar horizontalmente (por ejemplo, un menú horizontal), el uso de float: left;.

    OriginalEl autor kaustavdm

  2. 12

    ¿Qué acerca de la configuración de direction:ltr en los elementos que estamos tratando de dar negativo text-indent?

    Demo: jsfiddle.net/Marcel/aJBnN/1/

    +1 esa es la respuesta correcta – obras y sólo cambia una propiedad que es irrelevante (ya que el texto se oculta)

    OriginalEl autor Marcel

  3. 2

    Tratar de establecer el texto de alineación para que coincida con la dirección en la que se la sangría de texto.

    Por ejemplo, si utiliza LTR y desea aplicar sangría al texto negativamente, además de la adición display: block, también debe agregar alineación a la izquierda.

    No seguro para RTL, pero parece lógico que debe guión positivamente y el uso de la alineación a la derecha.

    OriginalEl autor dizarter

  4. 2

    He encontrado la mejor manera es hacer el texto un color transparente:

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

    Nota:
    Este error todavía existe en firefox 12 (text-indent valor es ignorado en rtl)

    OriginalEl autor George Filippakos

  5. 2

    Mi problema era con text-align. En caso de modificar alinear el modo del elemento o el elemento padre(s) de ajuste a la izquierda, usted debe dar una negativa índice de text-indent. De lo contrario, usted debe dar un valor positivo.

    .case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}

    Lo contrario

    .case2{text-indent:999px;text-align:right;overflow:hidden;display:block}

    OriginalEl autor x-freestyler

  6. 1

    Puede utilizar la línea-altura de la especificación de un gran valor, digamos 100px para un 30px alta contenedor.

    sólo funciona si el contenedor es de tamaño limitado. puede que tenga que establecer específicamente la altura si no lo es todavía.

    OriginalEl autor Andrezero

  7. 1

    Yo prefiero esta solución:

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

    OriginalEl autor Krzysztof Trzos

  8. 0

    La text-indent: -99px es un viejo truco, que no es la manera óptima para ocultar el texto. ¿Por qué no utilizar visibility:hidden lugar?

    Presumiblemente, este es un intento de utilizar un mayores de imagen como contenido y ofrecer un verdadero texto para los lectores de pantalla en lugar de utilizar un <img> elemento con un alt atributo.
    no puedo utilizar visibility:hidden porque sólo tengo el texto a desaparecer. no todo el elemento en el que se coloca el texto. alguna solución?
    también, estoy usando una imagen de fondo allí. muy correcto!

    OriginalEl autor Tomer Cohen

Dejar respuesta

Please enter your comment!
Please enter your name here