Desbordamiento hacia la izquierda en lugar de hacia la derecha

105

Tengo un div con overflow:hidden, dentro del cual muestro un número de teléfono mientras 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 extremo derecho de su contenido y se desbordara hacia el lado izquierdo. ¿Cómo puedo crear este efecto?

número de teléfono desbordado a la izquierda

Serhat Ozgel
fuente
Para cualquiera que intente hacer que el texto se ejecute de arriba a abajo y alineado a la derecha, consulte stackoverflow.com/a/53576895/4418836
Jordan

Respuestas:

149

¿Ha intentado utilizar lo siguiente?

direction: rtl;

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

Rob Bell
fuente
22
Advertencia: esto no funciona para una pantalla de calculadora con caracteres especiales como / y *.
Max
11
Tampoco funciona para configuraciones regionales con formato de número que no sea de EE. UU., Como "" para separador de miles. Esta no es la solución correcta
Robert Slaney
12
Esta propiedad no está destinada a la alineación y también cambiará el orden de las palabras en el interior. Fe 14:00–15:00recurrirá a 15:00–14:00Firefox.
Andy
3
¿No invierte esto también el orden de los personajes?
evolutionxbox
7
Sí, necesita envolver los elementos contenidos en otro elemento con direction: ltrregla para revertir el efecto.
Óscar Gómez Alcañiz
56

Tuve el mismo problema y lo resolví usando dos divs. El div exterior hace el recorte a la izquierda y el div interior hace el flotante 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.

Abe
fuente
8
Quería ver esto funcionando, así que hice este JSFiddle para probarlo y ¡funciona muy bien! ¡Gran respuesta! ¡Gracias!
WebWanderer
4
Esta es una gran respuesta ya que direction rtl tiene todo tipo de efectos secundarios. Si desea asegurarse de que el div interno esté alineado a la izquierda y solo truncado a la izquierda si se excede el div, configure el .outer-div en max-width: 100% y display: inline-block. Vea aquí
Lucas
2
Gracias por JSFiddle WebWanderer. Lo actualicé para usarlo de overflow: visiblemanera que el contenido pueda filtrarse por el lado izquierdo .
joeytwiddle
8

Puede hacerlo float:righty 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, direction:rtlpero eso no parece cambiar el desbordamiento de los elementos del bloque.

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

catdotgif
fuente
De acuerdo. Haga flotar al padre hacia la derecha y asegúrese de que ningún contenedor intermedio tenga el desbordamiento configurado como oculto.
Lisa
8

fácil de hacer, <span>los números y la posición del intervalo 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

Esko
fuente
5

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>
Dji
fuente
0

Se modificó el marcado HTML y se agregó algo de 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;
Subramanian Narasimhan
fuente