Thuộc tính tràn văn bản CSS
Thí dụ
Sử dụng thuộc tính tràn văn bản:
div
{
white-space: nowrap;
overflow:
hidden;
text-overflow: ellipsis;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc text-overflow
tính 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 là bắt buộc đối với 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: | object .style.textOverflow = "ellipsis" |
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 | Play it |
---|---|---|
clip | Default value. The text is clipped and not accessible | |
ellipsis | Render an ellipsis ("...") to represent the clipped text | |
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 |
Các ví dụ khác
Thí 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;
}
Các 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