Overflow a sinistra anziché a destra
Domanda
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 verso 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 a sinistra, come se il div mostrasse l'estrema destra del suo contenuto e traboccasse sul lato sinistro. Come posso creare questo effetto?
Soluzione
Hai provato a utilizzare quanto segue:
direction: rtl;
Per ulteriori informazioni, consultare
http://www.w3schools.com/cssref/pr_text_direction.asp
Altri suggerimenti
Ho avuto lo stesso problema e l'ho risolto usando due div. Il div esterno esegue il clipping a sinistra e il div interno esegue il floating verso 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 traboccare a sinistra.
Puoi fare float:right
e trabocca a sinistra, ma nel mio caso devo centrare il div se la finestra è più grande dell'elemento, ma trabocca a sinistra se la finestra è più piccola. Qualche idea su questo?
Ho provato a giocare con direction:rtl
ma questo non sembra cambiare l'overflow degli elementi del blocco.
Penso che l'unica risposta sia fluttuare a destra, con un div alla destra di esso che è anche flottato a destra, quindi impostare la larghezza del div a destra per metà dello spazio della finestra rimanente con jquery.
fatto facilmente, <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
Funzionava 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 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;