Câu hỏi Tràn sang trái thay vì phải


Tôi có một div với overflow:hidden, trong đó tôi hiển thị số điện thoại khi người dùng nhập. 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 bên phải khi văn bản phát triển sang trái.

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

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ị phần 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?

overflowing phone number to left


76
2017-10-20 11:09


gốc




Các câu trả lời:


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

direction: rtl;

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


121
2017-10-20 11:11



Cảnh báo: điều này không hoạt động cho màn hình máy tính với các ký tự đặc biệt như / và *. - Max
Nó cũng không hoạt động cho các ngôn ngữ có định dạng số không phải của Hoa Kỳ, như "" cho nghìn dấu phân cách. Đây không phải là giải pháp đúng - Robert Slaney
Thuộc tính này không có nghĩa là căn chỉnh, và nó cũng sẽ thay đổi thứ tự của các từ bên trong. F.e. 14:00–15:00 sẽ chuyển sang 15:00–14:00 trong Firefox. - Andy
Điều này cũng không đảo ngược thứ tự của các nhân vật? - evolutionxbox
Có, bạn cần bọc các phần tử chứa trong phần tử khác với direction: ltr quy tắc để đảo ngược hiệu ứng. - Óscar Gómez Alcañiz


Tôi đã có cùng một vấn đề và giải quyết nó bằng cách sử dụng hai divs. Các div bên ngoài không cắt ở bên trái và div bên trong làm 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 bên trong div bên trong và tràn nó ở bên trái.


45
2017-09-28 20:02



Tôi muốn thấy điều này, vì vậy tôi đã thực hiện JSFiddle này để kiểm tra nó và nó hoạt động tuyệt vời! Câu trả lời chính xác! Cảm ơn! - WebWanderer
Đây là một câu trả lời tuyệt vời như hướng rtl có tất cả các loại tác dụng phụ. Nếu bạn muốn đảm bảo div bên trong được căn trái và chỉ cắt ngắn bên trái nếu div bị vượt quá, hãy đặt .outer-div thành max-width: 100% và display: inline-block. Xem đây - Luke
Cảm ơn JSFiddle WebWanderer. Tôi đã cập nhật nó để sử dụng overflow: visible để nội dung có thể rò rỉ ra khỏi phía bên tay trái. - joeytwiddle


Bạn có thể làm float:right và nó sẽ tràn sang bên 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 bên trái nếu cửa sổ nhỏ hơn. Bất kỳ suy nghĩ về điều đó?

Tôi đã thử chơi với direction:rtl nhưng điều đó dường như không thay đổi tràn của các phần tử khối.

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


5
2018-04-22 16:57



Đồng ý. Float cha mẹ bên phải và đảm bảo không có container can thiệp có tràn bộ để ẩn. - Lisa


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

<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





Điều này làm việc như một say mê:

<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