Tràn văn bản - Thủ thuật CSS

Các text-overflowbất động sản trong CSS giao dịch với các tình huống mà văn bản được cắt bớt khi nó tràn hộp của phần tử. Nó có thể được cắt bớt (nghĩa là bị cắt, bị ẩn), hiển thị dấu chấm lửng ('…', Giá trị dãy Unicode U + 2026) hoặc hiển thị một chuỗi do tác giả xác định (không có trình duyệt hiện tại hỗ trợ cho các chuỗi do tác giả xác định).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Lưu ý rằng text-overflowchỉ xảy ra khi các nhân chứa overflowtài sản có giá trị hidden, scrollhay autovà white-space: nowrap;.

Tràn văn bản chỉ có thể xảy ra trên các phần tử cấp khối hoặc nội tuyến, vì phần tử cần phải có chiều rộng để được tràn văn bản. Sự tràn xảy ra theo hướng được xác định bởi thuộc tính hướng hoặc các thuộc tính liên quan.

Bản trình diễn sau đây hiển thị hành vi của thuộc text-overflowtính bao gồm tất cả các giá trị có thể. Hỗ trợ trình duyệt khác nhau!

Kiểm tra cây bút này!

Đặt overflowthành scrollhoặc autosẽ hiển thị thanh cuộn để hiển thị văn bản bổ sung, trong khi hiddenthì không. Văn bản ẩn có thể được chọn bằng cách chọn các dấu chấm lửng.

Đồ cũ

Một phiên bản cũ của thông số kỹ thuật cho biết bạn có thể sử dụng URL đến một hình ảnh cho dấu chấm lửng, nhưng có vẻ như điều đó đã bị xóa.

Có một cú pháp hai giá trị, ví dụ text-overflow: ellipsis ellipsis;, sẽ kiểm soát việc tràn ở bên trái và bên phải của cùng một vùng chứa. Tôi không chắc làm thế nào để đạt được điều đó. Có lẽ văn bản được căn giữa trong một vùng chứa quá nhỏ? Thông số kỹ thuật mới cho biết điều này, cũng như xác định một chuỗi, là "rủi ro."

Tôi không chắc từ đâu ellipsis-wordđến. Nó không có trong thông số kỹ thuật hoặc trong bất kỳ tài liệu nào khác ngoài WebPlatform.org.

Các text-overflowbất động sản từng là viết tắt cho sự kết hợp của text-overflow-modevà text-overflow-ellipsis, nhưng không được nữa và những đặc tính riêng biệt không tồn tại.