2010-03-05 30 views
19

Có ai biết cách sử dụng {text-overflow: ellipsis;} trên một đoạn văn bản được bao bọc thành dòng thứ hai không?Bất kỳ ai cũng biết cách sử dụng tràn văn bản CSS trên văn bản được gói?

Thêm {khoảng trắng: nowrap;} làm cho tác vụ tràn văn bản, nhưng tôi cần văn bản để bọc nên tôi thực sự không thể sử dụng.

+1

Điều gây ra sự cố của tôi không phải là thiết lập tràn để ẩn, đó là khoảng trống: nowrap có vẻ là cần thiết để làm tràn văn bản hoạt động. Tôi cần dấu ba chấm xuất hiện sau dòng thứ hai của văn bản, mà tôi không thể tìm ra cách để làm. –

+1

Vui lòng chọn câu trả lời, đăng giải pháp bạn đã đến hoặc cho biết rằng câu trả lời đã cho không được chấp nhận cho trường hợp của bạn. Cảm ơn! – kroehre

Trả lời

2

Tôi khá chắc chắn rằng những gì bạn đang cố gắng làm là không thể trong một giải pháp CSS tinh khiết. Tuy nhiên có một cách để hack cùng một kết quả tương tự. Dưới đây là những gì tôi đã làm:

http://cce.usyd.edu.au/courses/Business+%26+Management/Business+Communication

Xem phai trên khối văn bản giới thiệu mỗi khóa học? Điều đó đã được thực hiện bằng cách hạn chế tràn hàng đầu theo cách thông thường và sau đó đặt một div khác trên đỉnh của dòng cuối cùng và thực hiện mờ dần trong CSS. Thay vì mờ dần, bạn cũng có thể chèn dấu chấm lửng hoặc một số đầu mối trực quan khác.

Vì vậy, không giải quyết chính xác theo cách bạn muốn, nhưng đạt được kết quả giao diện người dùng tương tự để đảm bảo người dùng biết rằng nội dung bị cắt bớt. Cá nhân tôi nghĩ rằng nó khá đẹp :-)

+0

Giải pháp sáng tạo, tuyệt vời! –

2

Nếu bạn biết nội dung sẽ được bao bọc thành hai dòng mỗi khi giải pháp này hoạt động. Sử dụng ::after và nội dung: '...'; và sau đó định vị nó trên góc dưới bên phải của loại của bạn (mà phải là một yếu tố cấp khối). Điều này sẽ chỉ hoạt động nếu bạn đang làm việc dựa trên màu nền đồng nhất khi bạn cần đặt nền của ::after để khớp.

Sự sụp đổ duy nhất là các thông số giới hạn này có thể thành công và thực tế là nó sẽ cắt giảm một nửa nếu mọi thứ không xếp hàng đúng (có thể là không).

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