Fade văn bản quá dài bên trong phần tử HTML

Question

Vì vậy, câu hỏi của tôi là tương tự như sau:

crop text too long inside div

Những gì tôi không muốn làm là có một kết thúc khó để các văn bản (cắt bỏ bất cứ điều gì văn bản tràn) .

Kết quả mong muốn sẽ không bao gồm dấu ba chấm (...) nhưng sẽ "mờ dần". Vì vậy, nếu tôi có một cái gì đó như:

<div class="text">This is the really long area of text that I want to chop</div> 

sau đó tại bất cứ nơi nào tôi quyết định, nói giữa chừng trong wa | nt ... n sẽ nhạt dần rưỡi, và t sẽ bị mờ đi gần như hoàn toàn. Tất nhiên vị trí là ngẫu nhiên và có thể rơi acroos 3 hoặc 4 chữ cái ...

Dưới đây là các giải pháp có thể chấp nhận theo thứ tự ưu tiên.

1. Có thể làm mờ văn bản bằng css một mình không?
2. Nếu không thể, sử dụng một phần tử khác trong div.text, tôi có thể thực hiện những gì tôi muốn (có thể mờ dần không?).
3. Làm điều đó với jQuery? (ugh ... không được ưa thích)

Answer 1

Giả sử nền trang của bạn có màu trắng: Tạo hình gif chuyển từ trong suốt sang màu trắng (từ trái sang phải). Lớp phủ này ở phía bên phải của div. Văn bản của bạn dường như sẽ mờ dần sang màu trắng.

Điều này tương tự như cách "thả bóng" được tạo.

Edited thêm:

tôi nên đã trả lời mục danh sách của bạn trực tiếp.

1. Không, không thể làm mờ văn bản bằng CSS, trừ khi bạn làm điều đó theo từng ký tự; nhưng điều đó gần như không thể kiểm soát trên các trình duyệt và độ phân giải màn hình khác nhau.

2. Độ mờ không phai mờ.

3. Tôi không biết một đối tượng jQuery nào thực hiện điều này, nhưng tôi chưa sử dụng nhiều.

Answer 2

Giải pháp của bạn 2. thực sự là có thể. Bạn chỉ cần sử dụng một phần tử được định vị hoàn toàn có nền gradient tuyến tính, từ màu trắng đến trong suốt.

Không cần hình ảnh.

Bạn có thể xem http://css-tricks.com/text-fade-read-more/