Thuộc tính text-overflow trong CSS
Bùi Tấn Lực - 879
- 02/10/2025
Chức năng của Thuộc tính text-overflow trong CSS
Thuộc tính text-overflow trong CSS dùng để quy định dấu ba chấm phía sau một văn bản trong phần tử HTML sau khi cắt bỏ phần thừa để phù hợp với giao diện.
Cú pháp của Thuộc tính text-overflow trong CSS
text-overflow: giatri;
giatri: Giá trị để quy định dấu ba chấm phía sau một văn bản trong phần tử HTML sau khi cắt bỏ phần thừa (Ví dụ: ellipsis, clip,...)
Các giá trị của Thuộc tính text-overflow trong CSS
ellipsis: Giới hạn 1 hàng và khi tới giới hạn chiều rộng sẽ hiện dấu ba chấm.
clip: Giới hạn 1 hàng và khi tới giới hạn chiều rộng sẽ ẩn chữ bị tràn ra.
Code Thuộc tính text-overflow trong CSS
text-overflow: ellipsis; Giới hạn 1 hàng và khi tới giới hạn chiều rộng sẽ hiện dấu ba chấm
text-overflow: clip; Giới hạn 1 hàng và khi tới giới hạn chiều rộng sẽ ẩn chữ bị tràn ra
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính text-overflow trong CSS</title>
<style>
.divmuc{width:250px; height:auto; white-space: nowrap; overflow: hidden; margin-bottom:15px}
</style>
</head>
<body>
<h1>Code Thuộc tính text-overflow trong CSS</h1>
<p>Dùng để quy định dấu ba chấm phía sau một văn bản trong phần tử HTML sau khi cắt bỏ phần thừa để phù hợp với giao diện, ở đây mình đang cố định chiều rộng width:250px:</p>
<div class="divmuc" style="text-overflow: ellipsis;" >text-overflow: ellipsis; Giới hạn 1 hàng và khi tới giới hạn chiều rộng sẽ hiện dấu ba chấm</div>
<div class="divmuc" style="text-overflow: clip;" >text-overflow: clip; Giới hạn 1 hàng và khi tới giới hạn chiều rộng sẽ ẩn chữ bị tràn ra</div>
</body>
</html>
Những thuộc tính CSS cần kết hợp với text-overflow
text-overflow không tự tạo dấu ba chấm chỉ vì phần văn bản dài hơn kích thước phần tử. Để hiệu ứng cắt nội dung hoạt động đúng, cần thiết lập thêm các thuộc tính kiểm soát phần nội dung vượt ra ngoài và cách văn bản xuống dòng.
Vì sao text-overflow không hoạt động khi dùng riêng?
Khi chỉ khai báo text-overflow, trình duyệt vẫn có thể hiển thị toàn bộ văn bản hoặc cho phép văn bản xuống dòng theo cách thông thường. Thuộc tính này chỉ xác định cách biểu thị phần nội dung bị cắt, chứ không trực tiếp tạo ra vùng giới hạn cho văn bản.
Chẳng hạn, nếu muốn hiển thị dấu ba chấm khi một dòng chữ quá dài, phần tử cần có chiều rộng giới hạn và đồng thời kiểm soát phần nội dung nằm ngoài vùng đó. Nếu thiếu các điều kiện này, text-overflow: ellipsis có thể không cho kết quả như mong muốn.
.title {
width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Trong ví dụ trên, width tạo giới hạn cho vùng hiển thị, overflow: hidden ẩn phần chữ vượt quá giới hạn, còn white-space: nowrap giữ nội dung trên một dòng. Sau khi có vùng bị cắt, text-overflow: ellipsis mới có điều kiện thể hiện dấu ba chấm ở cuối.
Cách kết hợp text-overflow với overflow và white-space
Bộ ba overflow, white-space và text-overflow thường được sử dụng cùng nhau khi cần rút gọn văn bản trên một dòng. Mỗi thuộc tính đảm nhận một nhiệm vụ riêng nên việc thiếu một trong số đó có thể làm hiệu ứng không đạt được kết quả cần thiết.
- overflow: hidden: giới hạn phần nội dung không được phép hiển thị bên ngoài phần tử.
- white-space: nowrap: ngăn văn bản tự động xuống dòng.
- text-overflow: ellipsis: biểu thị phần nội dung bị khuất bằng dấu ba chấm.
Một cách viết đầy đủ có thể đặt trực tiếp vào lớp CSS như sau:
.description {
width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Cách kết hợp này đặc biệt hữu ích với tên sản phẩm, tiêu đề bài viết, danh mục hoặc các đoạn mô tả ngắn. Thay vì để một chuỗi quá dài phá vỡ bố cục, giao diện vẫn giữ được kích thước ổn định và người dùng có thể nhanh chóng nhận biết rằng nội dung còn tiếp tục.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính text-overflow trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
