web-dev-qa-db-ja.com

右ではなく左にオーバーフロー

overflow:hiddenを持つdivがあり、その中にユーザーが入力した電話番号を表示します。 div内のテキストは右に揃えられ、テキストが左に大きくなるにつれて入力文字が右に追加されます。

しかし、テキストがdivに収まらないほど大きくなると、数字の最後の文字が自動的にトリミングされ、ユーザーは入力した新しい文字を見ることができなくなります。

私がやりたいのは、divがそのコンテンツの右端を表示し、左側にあふれているように、左の文字を切り抜くことです。この効果を作成するにはどうすればよいですか？

overflowing phone number to left

csshtmloverflow
94
Serhat Ozgel

以下を使用してみましたか？

direction: rtl;

詳細については
http://www.w3schools.com/cssref/pr_text_direction.asp

141
Rob Bell

同じ問題があり、2つのdivを使用して解決しました。外側のdivは左側でクリッピングを行い、内側のdivは右側へのフローティングを行います。

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

内側のdiv内にコンテンツを配置し、左側でオーバーフローさせることができるはずです。

52
Abe

float:rightを実行すると左にオーバーフローしますが、私の場合、ウィンドウが要素より大きい場合はdivを中央に配置する必要がありますが、ウィンドウが小さい場合は左にオーバーフローする必要があります。それについて何か考えはありますか？

direction:rtlをいじってみましたが、ブロック要素のオーバーフローは変わらないようです。

唯一の答えは、それを右にフロートし、その右にdivも右にフロートし、jqueryでdivの幅を残りのウィンドウスペースの半分に設定することだと思います。

7
catdotgif

簡単にできます、<span>数値を指定し、オーバーフローが非表示になっている要素内で絶対スパンを右に配置します。

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

:)

rgrdsジェイク

5
jake

これは魅力のように機能しました：

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

HTMLマークアップを変更し、WebWandererのjsFiddleソリューションにJavaScriptを追加しました。

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