Thuộc tính tràn văn bản CSS
Ví dụ
Sử dụng thuộc tính tràn văn bản:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính text-overflow
chỉ định cách báo hiệu nội dung bị tràn không được hiển thị cho người dùng. Nó có thể được cắt bớt, hiển thị dấu chấm lửng (...) hoặc hiển thị một chuỗi tùy chỉnh.
Cả hai thuộc tính sau đều được yêu cầu cho tính năng tràn văn bản:
- khoảng trắng: nowrap;
- tràn: ẩn;
Giá trị mặc định: | kẹp |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.textOverflow="ellipsis" Hãy thử nó |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
Cú pháp CSS
text-overflow: clip|ellipsis| string |initial|inherit;
Giá trị tài sản
Value | Description | Demo |
---|---|---|
clip | Default value. The text is clipped and not accessible | Demo ❯ |
ellipsis | Render an ellipsis ("...") to represent the clipped text | Demo ❯ |
string | Render the given string to represent the clipped text | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Tràn văn bản với hiệu ứng di chuột (hiển thị toàn bộ văn bản khi di chuột):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Hiệu ứng văn bản CSS
Tham chiếu DOM HTML: thuộc tính textOverflow