Bùi Tấn Lực - 157
- 02/10/2025
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, chi tiết như nào hãy cùng chúng tôi phân tích:
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>
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
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
Chia sẻ nội dung đánh giá của bạn về Thuộc tính text-overflow trong CSS
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 *
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 *
Bình luận, Hỏi đáp
Đăng ký tư vấn miễn phí
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
