122

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

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

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

左に溢れる電話番号

4

7 に答える 7

171

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

direction: rtl;

詳細については、
http://www.w3schools.com/cssref/pr_text_direction.aspを参照してください。

于 2008-10-20T11:11:43.817 に答える
60

同じ問題があり、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 内に任意のコンテンツを配置し、左側にオーバーフローできるはずです。

于 2012-09-28T20:02:57.177 に答える
8

簡単に行うことができ、<span>オーバーフローが隠されている要素内の数字と絶対範囲を右側に配置します。

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

:)

ジェイク

于 2009-03-24T18:02:50.573 に答える
8

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

<div style="direction: rtl;">
  <span style="white-space: nowrap; direction: ltr; display: inline-block;">your short or long comment<span>
</div>
于 2016-10-05T12:53:12.067 に答える
7

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

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

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

于 2012-04-22T16:57:56.783 に答える