Pertanyaan Berlimpah ke kiri, bukan ke kanan


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

Tapi begitu teks cukup besar untuk tidak masuk dalam div, karakter terakhir dari nomor 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 saya bisa membuat efek ini?

overflowing phone number to left


76
2017-10-20 11:09


asal


Jawaban:


Sudahkah Anda mencoba menggunakan yang berikut ini:

direction: rtl;

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


121
2017-10-20 11:11



Saya memiliki masalah yang sama dan memecahkannya menggunakan dua div. The outer div melakukan clipping di sebelah kiri dan inner div 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 menempatkan konten apa pun di dalam div dalam dan melimpahkannya di sebelah kiri.


45
2017-09-28 20:02



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. Setiap pemikiran tentang itu?

Saya mencoba bermain-main dengan direction:rtl tetapi itu tidak muncul untuk mengubah limpahan elemen blok.

Saya pikir satu-satunya jawaban adalah mengapung dengan benar, dengan div di sebelah kanan itu juga melayang kanan, kemudian mengatur lebar div ke kanan untuk setengah ruang jendela yang tersisa dengan jquery.


5
2018-04-22 16:57



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

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

:)

rgrds jake


5
2018-03-24 18:02



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>

2
2017-10-05 12:53