Débordement à gauche au lieu de droite

Question

J'ai un div avec overflow:hidden à l'intérieur duquel j'affiche 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 au fur et à mesure que le texte s'étend vers la gauche.

Mais une fois que le texte est suffisamment grand 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'il tape.

Ce que je veux faire, c'est recadrer les caractères de gauche, comme si le div affichait la partie la plus à droite de son contenu et débordait sur le côté gauche. Comment puis-je créer cet effet ?

Answer 1

Avez-vous essayé d'utiliser ce qui suit :

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 je l'ai résolu en utilisant deux divs. La div extérieure effectue le découpage sur la gauche et la div intérieure effectue le flottement sur 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 faire déborder sur la gauche.

Answer 3

Voici une solution beaucoup plus simple qui utilise le système Flexbox. Elle fonctionne également sur les pseudo-éléments.

p {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;

  font-size: 2em;
  width: 120px;
  background: yellow;
}

<p>156189789123</p>

Answer 4

Ça a marché comme sur des roulettes :

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

Answer 5

Vous pouvez faire float:right et il débordera 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éborder sur la gauche si la fenêtre est plus petite. Avez-vous des idé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 solution est de le faire flotter à droite, avec un div à sa droite qui est également flotté à droite, puis de définir la largeur du div à droite à la moitié de l'espace restant de la fenêtre avec jquery.