Overflow a sinistra invece che a destra

Ho un div con overflow:hidden, all'interno del quale mostro un numero di telefono mentre l'utente lo digita. Il testo all'interno del div è allineato a destra e i caratteri in arrivo vengono aggiunti a destra man mano che il testo cresce a sinistra.

Ma una volta che il testo è abbastanza grande da non rientrare nel div, gli ultimi caratteri del numero vengono automaticamente ritagliati e l'utente non può vedere i nuovi caratteri che digita.

Quello che voglio fare è ritagliare i caratteri di sinistra, come se il div mostrasse il contenuto più a destra e traboccasse sul lato sinistro. Come posso creare questo effetto?

Hai provato a utilizzare quanto segue:

direction: rtl;

Per ulteriori informazioni, vedere
http://www.w3schools.com/cssref/pr_text_direction.asp

Ho avuto lo stesso problema e l'ho risolto utilizzando due div. Il div esterno esegue il ritaglio a sinistra e il div interno esegue il galleggiamento a destra.

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

Dovresti essere in grado di inserire qualsiasi contenuto all'interno del div interno e riempirlo a sinistra.

Puoi farlo float:righte andrà in overflow a sinistra, ma nel mio caso ho bisogno di centrare il div se la finestra è più grande dell'elemento, ma overflow a sinistra se la finestra è più piccola. Qualche idea su questo?

Ho provato a giocarci direction:rtlma questo non sembra cambiare l'overflow degli elementi del blocco.

Penso che l'unica risposta sia fluttuare a destra, con un div a destra che è anche fluttuato a destra, quindi impostare la larghezza del div a destra a metà dello spazio rimanente della finestra con jquery.

Facilissimo, <span>i numeri e posizionano lo span assoluto a destra all'interno di un elemento con overflow nascosto.

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

:)

rgrds jake

Questo ha funzionato come un fascino:

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

Markup HTML modificato e aggiunto un po 'di javascript alla soluzione jsFiddle di 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;