ล้นไปทางซ้ายแทนที่จะเป็นขวา

ฉันมี div ด้วยoverflow:hiddenซึ่งฉันจะแสดงหมายเลขโทรศัพท์ในขณะที่ผู้ใช้พิมพ์ ข้อความภายใน div จะจัดชิดขวาและอักขระขาเข้าจะถูกเพิ่มไปทางขวาเมื่อข้อความขยายไปทางซ้าย

แต่เมื่อข้อความใหญ่พอที่จะไม่พอดีกับ div อักขระสุดท้ายของตัวเลขจะถูกครอบตัดโดยอัตโนมัติและผู้ใช้จะไม่เห็นอักขระใหม่ที่เธอพิมพ์

สิ่งที่ฉันต้องการทำคือครอบตัดอักขระทางซ้ายเช่น div แสดงเนื้อหาทางขวาสุดและล้นไปทางด้านซ้าย ฉันจะสร้างเอฟเฟกต์นี้ได้อย่างไร?

คุณได้ลองใช้สิ่งต่อไปนี้:

direction: rtl;

สำหรับข้อมูลเพิ่มเติมโปรดดูที่
http://www.w3schools.com/cssref/pr_text_direction.asp

ฉันมีปัญหาเดียวกันและแก้ไขโดยใช้สอง 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 ด้านในและวางเนื้อหาทางด้านซ้าย

คุณสามารถทำได้float:rightและมันจะล้นไปทางซ้าย แต่ในกรณีของฉันฉันต้องจัดกึ่งกลาง div ถ้าหน้าต่างใหญ่กว่าองค์ประกอบ แต่จะล้นไปทางซ้ายถ้าหน้าต่างเล็กกว่า มีความคิดเกี่ยวกับเรื่องนี้หรือไม่?

ฉันลองเล่นด้วยdirection:rtlแต่ดูเหมือนว่าจะไม่เปลี่ยนองค์ประกอบบล็อกมากเกินไป

ฉันคิดว่าคำตอบเดียวคือลอยให้ถูกต้องโดยให้ div ทางขวาของมันลอยไปทางขวาด้วยจากนั้นตั้งค่าความกว้างของ div ไปทางขวาให้เหลือครึ่งหนึ่งของพื้นที่หน้าต่างที่เหลือด้วย jquery

ทำได้อย่างง่ายดาย<span>ตัวเลขและตำแหน่งของช่วงสัมบูรณ์ไปทางขวาภายในองค์ประกอบที่ซ่อนส่วนเกินไว้

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

:)

rgrds เจค

สิ่งนี้ได้ผลเหมือนมีเสน่ห์:

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

แก้ไขมาร์กอัป HTML และเพิ่มจาวาสคริปต์ในโซลูชัน 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;