Tôi cần tràn để cắt ngắn từ bên trái, với hình elip

Tóm lại, tôi có một trường có chữ số ngoài cùng bên phải là quan trọng nhất. (Đương nhiên, trường này đến từ hệ thống của các chi nhánh của chúng tôi, dựa trên các khóa chính của chúng, do đó, hầu hết các chữ số bên trái chỉ thay đổi một lần cho mỗi kỷ nguyên!)Tôi cần tràn để cắt ngắn từ bên trái, với hình elip

Mọi người đều biết CSS cung cấp cắt ngang với "tràn văn bản: dấu chấm lửng;" . Làm thế nào (mà không cần thêm mã vào máy chủ để chuẩn bị trường đó thông qua phẫu thuật chuỗi) chúng ta có cắt bớt trường trên LEFT không và đặt "..." elipses trên LEFT?

(CSS3 là okay.)

Nguồn

2012-10-06 Phlip

Related: http://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side –

Tôi đã thêm một fiddle để hiển thị vấn đề và đề xuất một giải pháp rất hackish: http: // jsfiddle. net/ryanwheale/2cyVX/ –

trường hợp cạnh này là lý do tại sao các nhà phát triển Firefox từ chối thực hiện dấu ba chấm cho đến FFv7, mặc dù nhận được rất nhiều flak cho nó. Họ đã thực hiện nó cuối cùng, nhưng spec có rất nhiều lỗ xung quanh các cạnh. Nếu bạn đang làm bất cứ điều gì nhiều hơn cơ bản ... ở cuối của một hộp, bạn sẽ tìm thấy vấn đề với nó. – Spudley

Cố gắng sử dụng thủ thuật này:

HTML

<p class="ellipsis">ert3452654546</p>

CSS

.ellipsis 
    { 
     overflow:hidden; 
     width: 60px; 
     direction:rtl; 
     margin-left:15px; 
     white-space: nowrap; 
    } 

.ellipsis:after{position:absolute;left:0px; content:"...";}

FIDDLE

Nguồn

2012-10-06 17:54:55 khomyakoshka

+1 - đây là giải pháp duy nhất tôi đã thấy hoạt động trong Chrome đúng cách. Làm tốt lắm! –

Phần tử cha thành phần tử ': after' cần phải có' vị trí: tương đối' hoặc 'tuyệt đối'. Hoặc nếu không bạn có được điều này: http://jsfiddle.net/ekLpfy08/ –

Không cần 'sau' giả phần tử. Bạn có thể thêm 'text-overflow: ellipsis' thay vì' :: after'. Các chấm sẽ xuất hiện ở bên trái, vì 'hướng' là' rtl'. – kakaja

Tôi không thể kiểm tra nó bây giờ, nhưng tôi khá chắc chắn rằng việc thêm

direction: rtl;

sẽ làm kết quả mong đợi.

Nguồn

2012-10-06 16:58:36 Tchoupi

Nó thực sự đặt dấu chấm lửng ở bên trái, tuy nhiên, có vẻ như là một lỗi trong Chrome nơi dấu ba chấm đơn giản được thêm vào văn bản, nhưng bạn vẫn thấy cạnh trái (bắt đầu) của văn bản thay vì kết thúc. Xem fiddle: http://jsfiddle.net/ryanwheale/2cyVX/ –

@RyanWheale, hiện đang xảy ra trong IE ... Nhưng không phải trong Chrome nữa AFAIK –

Cảm ơn, hoạt động bên trong '' trong một '

': http://i.imgur.com/aPrBJmc.png – Dorian

Bạn có thể sử dụng một lớp css để có loại hành vi như:

.responsive-text { 
    display: inline-block; 
    vertical-align: middle; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    direction: rtl; 
    width: 100%; 
}

Bạn chỉ phải xác định kích thước của container của văn bản này và mỗi khi các văn bản bên trong không điền vào chỉ có một dòng, nó sẽ cắt ngắn văn bản và thêm ... ngay từ đầu.

Nguồn

2018-02-14 13:21:49 Yoan

Các vấn đề liên quan

Tôi cần tràn để cắt ngắn từ bên trái, với hình elip

Trả lời

Các vấn đề liên quan