web-dev-qa-db-fra.com

Débordement à gauche au lieu de droite

J'ai un div avec overflow:hidden, à l'intérieur duquel je montre un numéro de téléphone lorsque 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 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 et débordait du côté gauche. Comment puis-je créer cet effet?

overflowing phone number to left

csshtmloverflow
86
Serhat Ozgel

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

134
Rob Bell

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

50
Abe

Vous pouvez faire float:right et il débordera à gauche, mais dans mon cas, je dois centrer le 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 changer le débordement des éléments de bloc.

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

7
catdotgif

facilement fait, <span> les nombres et positionnez la plage absolue à droite dans un élément masqué.

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

:)

rgrds jake

5
jake

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>
5
Dji

Balisage HTML modifié 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;
0
Subramanian Narasimhan