chữ tràn với lược trên trái

Question

Xem xét việc này đoạn html/css:

.l { text-align: left; } 
 
.r { text-align: right; } 
 

 
p { 
 
    width: 150px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    border: solid 1px green; 
 
}

<p class="l">111222333444555666777888999</p> 
 
<p class="r">111222333444555666777888999</p>

Nó cho thấy hai container cố định chiều rộng với một số văn bản quá dài để phù hợp với tràn đặt để hiển thị một dấu ba chấm để cho thấy rằng một số văn bản bị ẩn. Các container đầu tiên là trái hợp lý, thứ hai là đúng hợp lý.

Kết quả cho thấy dấu ba chấm nằm ở bên phải cho cả hai ví dụ.

Tuy nhiên, đối với quyền thứ hai chứng minh một, tôi muốn đạt được điều này:

...4555666777888999 

thay vì

1112223334445556... 

Đây có phải là có thể?

Answer 1

Bạn có thể thiết lập sự chỉ đạo của văn bản từ phải sang trái sử dụng tài sản direction: rtl hướng css:

.l { 
 
    text-align: left; 
 
    direction: rtl; 
 
} 
 
.r { 
 
    text-align: right; 
 
} 
 
p { 
 
    width: 150px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    border: solid 1px green; 
 
}

<p class="l">111222333444555666777888999</p> 
 
<p class="r">111222333444555666777888999</p>

hướng

Thiết lập thuộc tính hướng CSS để phù hợp với sự chỉ đạo của văn bản: rtl cho các ngôn ngữ viết từ phải sang trái (như tiếng Hebrew hoặc tiếng Ả Rập) văn bản và lít cho khác tập lệnh. Việc này thường được thực hiện như một phần của tài liệu (ví dụ: sử dụng thuộc tính dir trong HTML) thay vì thông qua việc sử dụng trực tiếp CSS .

Tài liệu tham khảo

MDN direction

Answer 2

Để có được hiệu ứng này, bạn phải sử dụng một chút hack. Xem ví dụ sau:

p { 
 
    border:1px solid #000; 
 
    width:150px; 
 
} 
 
.ellipsis { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.reverse-ellipsis { 
 
    text-overflow: clip; 
 
    position: relative; 
 
    background-color: white; 
 
} 
 
.reverse-ellipsis:before { 
 
    content: '\02026'; 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: -1em; 
 
    background-color: inherit; 
 
    padding-left: 1em; 
 
    margin-left: 0.5em; 
 
} 
 

 
.reverse-ellipsis span { 
 
    min-width: 100%; 
 
    position: relative; 
 
    display: inline-block; 
 
    float: right; 
 
    overflow: visible; 
 
    background-color: inherit; 
 
    text-indent: 0.5em; 
 
} 
 
.reverse-ellipsis span:before { 
 
    content: ''; 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 1em; 
 
    height: 1em; 
 
    background-color: inherit; 
 
    z-index: 200; 
 
    left: -.5em; 
 
}

<p class="ellipsis reverse-ellipsis"> 
 
    <span>111222333444555666777888999</span> 
 
</p> 
 
<p class="ellipsis">111222333444555666777888999</p>

biết thêm thông tin về vấn đề này bạn có thể tìm thấy ở đây: http://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/