Pregunta Desbordamiento a la izquierda en lugar de a la derecha


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?

overflowing phone number to left


76
2017-10-20 11:09


origen


Respuestas:


¿Has probado usar lo siguiente?

direction: rtl;

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


121
2017-10-20 11:11



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.


45
2017-09-28 20:02



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 desbordamiento 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 de 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.


5
2018-04-22 16:57



fácil de hacer <span> los números y 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


5
2018-03-24 18:02



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>

2
2017-10-05 12:53