Ví dụ về thuộc tính text-overflow

Thuộc tính text-overflow với giá trị clip

Thuộc tính text-overflow với giá trị clip xén bớt vùng text.

HTML viết:

<html>
<head></head>
<body>
<p>Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow</p>
</body>
</html>

Giả sử ban đầu ta có CSS:

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    white-space: nowrap;
    width: 200px;
}

Hiển thị trình duyệt khi chưa có text-overflow:

Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow

Thêm thuộc tính text-overflow, CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    width: 200px;
}

Hiển thị trình duyệt khi có text-overflow:

Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow

Thuộc tính text-overflow với giá trị ellipsis

Thuộc tính text-overflow với giá trị ellipsis: Cắt một đoạn text và thay thế bằng dấu 3 chấm.

Thêm thuộc tính text-overflow với giá trị ellipsis, CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

Hiển thị trình duyệt khi có text-overflow:

Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow

Thuộc tính text-overflow với giá trị chuỗi

Thuộc tính text-overflow với giá trị chuỗi: Cắt một đoạn text và thay bằng một chuỗi khác.

Thêm thuộc tính text-overflow với giá trị chuỗi, CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    text-overflow: '...v.v...';
    white-space: nowrap;
    width: 200px;
}

Hiển thị trình duyệt khi có text-overflow:

Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow

Thuộc tính text-overflow sử dụng kèm với :hover

Thuộc tính text-overflow sử dụng kèm với :hover, điều khiển giá trị hover, thường dùng để hiển thị full text cho người dùng.

Thêm bộ chọn :hover, CSS viết:

p {
    border: 1px solid #cc0000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

p:hover { 
    overflow: visible;
    white-space: pre-line;
    width: 500px;
}

Hiển thị trình duyệt khi có text-overflow:

Đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow đây là đoạn text có sử dung text overflow