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 au fur et à mesure que l'utilisateur le tape. Le texte à l'intérieur du div est aligné à droite et les caractères entrants sont ajoutés à droite à mesure que le texte passe à gauche.

Mais une fois que le texte est suffisamment gros pour ne pas tenir dans le div, les derniers caractères du numéro sont automatiquement rognés et l'utilisateur ne peut pas voir les nouveaux caractères qu'elle tape.

Ce que je veux faire, c'est rogner les caractères de gauche, comme si la div affichait le contenu le plus à droite de son contenu et débordait du 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

J'ai eu le même problème et l'ai résolu en utilisant deux divs. La div externe effectue la coupure à gauche et la div interne flotte à 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 insérer n'importe quel contenu à l'intérieur du div interne et le déborder à gauche.

Answer 3

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

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

Je pense que la seule solution est de le faire flotter à droite, avec une div à droite, puis de régler la largeur de la div à droite sur la moitié de la fenêtre restante avec jQuery.

Answer 4

faites facilement, <span> les nombres et positionnez la plage absolue à droite dans un élément avec le dépassement de capacité masqué.

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

:

rgrds jake

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>

Answer 6

Modification du balisage HTML et ajout de javascript à la solution 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;