Desbordamiento hacia la izquierda en lugar de hacia la derecha

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 hacia 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 si el div mostrara el contenido más a la derecha y se desbordara hacia el lado izquierdo.¿Cómo puedo crear este efecto?

Answer 1

¿Has intentado usar lo siguiente?

direction: rtl;

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

Answer 2

Tuve el mismo problema y lo resolví usando dos divs. El div externo hace el recorte a la izquierda y el div interno flota 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 poner cualquier contenido dentro del div interno y desbordarlo a la izquierda.

Answer 3

Tu 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 se desbordará hacia la izquierda si la ventana es más pequeña.¿Alguna idea sobre eso?

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

Creo que la única respuesta es flotarlo hacia la derecha, con un div a la derecha que también flota hacia la derecha, luego establecer el ancho del div a la derecha a la mitad del espacio restante de la ventana con jquery.

Answer 4

hecho fácilmente, <span> los números y posicione el 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

Answer 5

Esto funcionó a las mil maravillas:

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

Answer 6

Se modificó el marcado HTML y se agregó JavaScript a la solución jsFiddle de WebWanderer.

https://jsfiddle.net/urulai/bfzqgreo/3/

HTML:

<div id="outer-div">

    <p>ipsum dolor amet bacon venison porchetta spare ribs, tongue turducken alcatra doner leberkas t-bone rump ball tip hamburger drumstick. Shoulder strip steak ribeye, kielbasa fatback pig kevin drumstick biltong pork short loin rump. Biltong doner ribeye, alcatra landjaeger tenderloin drumstick t-bone pastrami andouille. Sirloin spare ribs fatback, bresaola strip steak alcatra landjaeger kielbasa cupim doner. </p>

</div>

CSS:

#outer-div {
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:right;
  overflow:hidden;
  white-space: nowrap;
  border:1px solid black;
}

JS:

let outer = document.getElementById("outer-div");
outer.scrollLeft += outer.scrollWidth;