Tràn sang trái thay vì phải

Tôi có một div với overflow:hidden, bên trong tôi hiển thị một số điện thoại khi người dùng nhập nó. Văn bản bên trong div được căn chỉnh sang phải và các ký tự đến được thêm vào phải khi văn bản phát triển sang trái.

Nhưng một khi văn bản đủ lớn không vừa với div, các ký tự cuối cùng của số sẽ tự động bị cắt và người dùng không thể nhìn thấy các ký tự mới mà họ nhập.

Những gì tôi muốn làm là cắt các ký tự bên trái, giống như div đang hiển thị ở ngoài cùng bên phải của nội dung và tràn sang bên trái. Làm cách nào để tạo hiệu ứng này?

Bạn đã thử sử dụng như sau:

direction: rtl;

Để biết thêm thông tin, hãy xem
http://www.w3schools.com/cssref/pr_text_direction.asp

Tôi đã gặp vấn đề tương tự và đã giải quyết nó bằng cách sử dụng hai div. Div bên ngoài thực hiện cắt ở bên trái và div bên trong thực hiện nổi ở bên phải.

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

Bạn sẽ có thể đặt bất kỳ nội dung nào bên trong div bên trong và làm tràn nó ở bên trái.

Bạn có thể làm float:rightvà nó sẽ tràn sang trái, nhưng trong trường hợp của tôi, tôi cần căn giữa div nếu cửa sổ lớn hơn phần tử, nhưng tràn sang trái nếu cửa sổ nhỏ hơn. Bất kỳ suy nghĩ về điều đó?

Tôi đã thử chơi xung quanh direction:rtlnhưng điều đó dường như không thay đổi sự tràn các phần tử khối.

Tôi nghĩ câu trả lời duy nhất là thả nổi nó bên phải, với một div ở bên phải nó cũng nổi bên phải, sau đó đặt chiều rộng của div ở bên phải bằng một nửa không gian cửa sổ còn lại bằng jquery.

dễ dàng thực hiện, <span>các số và định vị khoảng tuyệt đối ở bên phải bên trong một phần tử có ẩn tràn.

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

:)

rgrds jake

Điều này hoạt động như một sự quyến rũ:

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

Đánh dấu HTML đã sửa đổi và thêm một số javascript vào giải pháp jsFiddle của 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;