Sağ yerine sola taşma

106

overflow:hiddenİçerisine kullanıcı yazarken bir telefon numarası gösterdiğim bir div var . Div içindeki metin sağa hizalanır ve metin sola doğru büyüdükçe gelen karakterler sağa eklenir.

Ancak metin div'e sığmayacak kadar büyük olduğunda, sayının son karakterleri otomatik olarak kırpılır ve kullanıcı yazdığı yeni karakterleri göremez.

Div'in içeriğinin en sağını göstermesi ve sol tarafa taşması gibi yapmak istediğim şey, sol karakterleri kırpmak. Bu etkiyi nasıl yaratabilirim?

sola doğru taşan telefon numarası

css html overflow

— Serhat Özgel
kaynak

Metni yukarıdan aşağıya ve sağa hizalı hale getirmeye çalışan herkes için, checkout stackoverflow.com/a/53576895/4418836

— Ürdün

151

Aşağıdakileri kullanmayı denediniz mi:

direction: rtl;

Daha fazla bilgi için bkz.
Http://www.w3schools.com/cssref/pr_text_direction.asp

— Rob Bell
kaynak

22

Uyarı: Bu, / ve * gibi özel karakterlere sahip bir hesap makinesi ekranı için çalışmaz.

— Maksimum

11

Binlik ayırıcı için "" gibi ABD sayı biçimlendirmesine sahip olmayan yerel ayarlar için de çalışmaz. Bu doğru çözüm değil

— Robert Slaney

12

Bu özellik hizalama amaçlı değildir ve içindeki kelimelerin sırasını da değiştirecektir. Fe 14:00–15:00, 15:00–14:00Firefox'ta dönecektir .

— Andy

3

Bu da karakterlerin sırasını tersine çevirmiyor mu?

— evolutionxbox

7

Evet, direction: ltrefekti tersine çevirmek için içerilen öğeleri başka bir öğeye kural ile sarmalamanız gerekir .

— Óscar Gómez Alcañiz

56

Aynı sorunu yaşadım ve iki div kullanarak çözdüm. Dıştaki div, soldaki kırpmayı, içteki div ise sağa kaydırmayı yapar.

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

Herhangi bir içeriği iç div'in içine koyabilmeli ve solda taşabilmelisiniz.

— Abe
kaynak

8

Bunun çalıştığını görmek istedim, bu yüzden bu JSFiddle'ı test etmek için yaptım ve harika çalışıyor! Mükemmel cevap! Teşekkürler!

— WebWanderer

4

Yön rtl'nin her türlü yan etkisi olduğu için bu harika bir cevap. İç div'in sola hizalandığından ve div aşıldığında yalnızca sola kesildiğinden emin olmak istiyorsanız, .outer-div değerini max-width: 100% ve display: inline-block olarak ayarlayın. Buraya

— Luke

2

JSFiddle WebWanderer için teşekkürler. overflow: visibleİçeriğin sol taraftan dışarı sızabilmesi için onu kullanmak üzere güncelledim .

— joeytwiddle

8

Yapabilirsiniz float:rightve sola taşar, ancak benim durumumda, pencere öğeden daha büyükse div'i ortalamam gerekir, ancak pencere daha küçükse sola taşar. Bununla ilgili herhangi bir fikrin var mı?

Etrafta oynamayı denedim direction:rtlama bu, blok elemanlarının taşmasını değiştirmiyor gibi görünüyor.

Bence tek yanıt, sağında bir div ile sağa doğru yüzdürmek ve ardından div'in genişliğini jquery ile kalan pencere boşluğunun yarısına kadar sağa ayarlamak.

— catdotgif
kaynak

Katılıyorum. Üst öğeyi sağa kaydırın ve araya giren konteynerlerin taşma ayarının gizli olmadığından emin olun.

— Lisa

8

kolayca yapılır, <span>sayılar ve açıklığı mutlak sağa doğru taşma gizlenmiş bir öğenin içinde konumlandırın.

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

:)

rgrds jake

— Esko
kaynak

5

Bu harika çalıştı:

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

— Dji
kaynak

0

HTML biçimlendirmesi değiştirildi ve WebWanderer'in jsFiddle çözümüne bazı javascript eklendi.

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;

— Subramanian Narasimhan
kaynak