Débordement à gauche au lieu de droite

Question

J'ai un div avec overflow:hidden, à l'intérieur duquel je montre un numéro de téléphone que l'utilisateur tape. Le texte à l'intérieur de la div est aligné à droite et les caractères entrants sont ajoutés à droite au fur et à mesure que le texte croît vers la gauche.

Mais une fois que le texte est assez grand pour ne pas tenir dans la div, les derniers caractères du nombre sont automatiquement recadrés et l'utilisateur ne peut pas voir les nouveaux caractères qu'elle tape. Ce que je veux faire est de recadrer les caractères de gauche, comme le div montre le contenu le plus à droite et débordant sur le côté gauche. Comment puis-je créer cet effet?

Answer 1

Avez-vous essayé d'utiliser les éléments suivants:

direction: rtl; 

Pour plus d'informations, voir
http://www.w3schools.com/cssref/pr_text_direction.asp

Answer 2

facilement fait, <span> les chiffres et la position de la durée absolue du droit à l'intérieur d'un élément avec débordement caché.

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

:)

Rgrds jake

Answer 3

Vous pouvez faire float:right et il déborde sur la gauche, mais dans mon cas, je dois centrer le div si la fenêtre est plus grande que l'élément , mais débordent vers la gauche si la fenêtre est plus petite. Des pensées à ce sujet?

J'ai essayé de jouer avec direction:rtl mais cela ne semble pas changer le débordement des éléments du bloc.

Je pense que la seule réponse est de le faire flotter correctement, avec un div à droite qui est également flottant à droite, puis définissez la largeur du div à droite de la moitié de l'espace de fenêtre restante avec jquery.

Answer 4

J'ai eu le même problème et l'ai résolu en utilisant deux divs. Le div externe fait le clipping sur la gauche et le div interne fait flotter vers la droite.

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

Vous devriez pouvoir placer n'importe quel contenu à l'intérieur du div interne et le déborder à gauche.

Answer 5

Cela a fonctionné comme un charme:

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