css - float - Desbordamiento a la izquierda en lugar de a la derecha

position css

Question

Tengo un div con overflow:hidden , dentro del cual muestro un número de teléfono a medida que el usuario lo escribe. El texto dentro del div se alinea a la derecha y los caracteres entrantes se agregan a la derecha a medida que el texto crece a la izquierda.

Pero una vez que el texto es lo suficientemente grande como para no caber en el div, los últimos caracteres del número se recortan automáticamente y el usuario no puede ver los nuevos caracteres que escribe.

Lo que quiero hacer es recortar los caracteres de la izquierda, como que el div muestra el extremo derecho de su contenido y se desborda hacia el lado izquierdo. ¿Cómo puedo crear este efecto?

Answer 1

¿Has probado usar lo siguiente?

direction: rtl;

Para más información, ver
http://www.w3schools.com/cssref/pr_text_direction.asp

Answer 2

Funcionó como por arte de magia:

<div style="direction: rtl;">
  <span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span>
</div>

Answer 3

Puedes hacer float:right y se desbordará hacia la izquierda, pero en mi caso necesito centrar el div si la ventana es más grande que el elemento, pero desbordamiento a la izquierda si la ventana es más pequeña. ¿Alguna idea sobre eso?

Intenté jugar con la direction:rtl pero eso no parece cambiar el desbordamiento de los elementos del bloque.

Creo que la única respuesta es flotar bien, con un div a la derecha que también está flotado a la derecha, luego establecer el ancho del div a la derecha a la mitad del espacio de la ventana restante con jquery.

Answer 4

Tuve el mismo problema y lo resolví usando dos divs. El div externo hace el recorte a la izquierda y el div interno lo hace a la derecha.

.outer-div {
  width:70%;
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  overflow:hidden;
  white-space: nowrap;
}

.inner-div {
  float:right;
}

:

<div class="outer-div">
  <div class="inner-div">     
    <p>A very long line that should be trimmed on the left</p>
  </div>
</div>

Debería poder colocar cualquier contenido dentro del div interno y desbordarlo a la izquierda.

Answer 5

fácil de hacer, <span> los números y la posición del tramo absoluto a la derecha dentro de un elemento con desbordamiento oculto.

<div style="width: 65px; height: 20px;
            overflow: hidden; position: relative; background: #66FF66;">
    <span style="position: absolute; right: 0;">05451234567</span>
</div>

:)

rgrds jake