Melimpah ke kiri, bukan ke kanan

Saya memiliki div dengan overflow:hidden, di dalamnya saya menunjukkan nomor telepon saat pengguna mengetiknya. Teks di dalam div diratakan ke kanan dan karakter masuk ditambahkan ke kanan saat teks tumbuh ke kiri.

Tapi begitu teks cukup besar untuk tidak muat di div, karakter terakhir dari nomor tersebut secara otomatis dipotong dan pengguna tidak dapat melihat karakter baru yang dia ketik.

Yang ingin saya lakukan adalah memotong karakter kiri, seperti div menunjukkan konten paling kanan dan meluap ke sisi kiri. Bagaimana cara membuat efek ini?

Sudahkah Anda mencoba menggunakan yang berikut ini:

direction: rtl;

Untuk informasi lebih lanjut lihat
http://www.w3schools.com/cssref/pr_text_direction.asp

Saya memiliki masalah yang sama dan menyelesaikannya menggunakan dua div. Div luar melakukan pemangkasan di sebelah kiri dan div bagian dalam melakukan floating ke kanan.

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

Anda harus dapat meletakkan konten apa pun di dalam div bagian dalam dan melimpahkannya di sebelah kiri.

Anda dapat melakukan float:right dan itu akan meluap ke kiri, tetapi dalam kasus saya, saya perlu memusatkan div jika jendela lebih besar dari elemen, tetapi meluap ke kiri jika jendela lebih kecil. Ada pemikiran tentang itu?

Saya mencoba bermain-main dengan direction:rtl tetapi itu tampaknya tidak mengubah luapan elemen blok.

Saya pikir satu-satunya jawaban adalah mengapungkannya dengan benar, dengan div di sebelah kanannya yang juga melayang ke kanan, lalu atur lebar div ke kanan menjadi setengah ruang jendela yang tersisa dengan jquery.

mudah dilakukan, <span>angka dan posisi span absolut ke kanan di dalam elemen dengan luapan tersembunyi.

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

:)

rgrds jake

Ini bekerja seperti pesona:

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

Memodifikasi markup HTML dan menambahkan beberapa javascript ke solusi jsFiddle 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;