CSS text-overflow property là một thuộc tính quan trọng trong CSS, được sử dụng để điều chỉnh hiển thị của văn bản khi không thể hiển thị toàn bộ nội dung. Thuộc tính này giúp chúng ta quyết định liệu văn bản có nên bị cắt bớt, hiển thị dấu chấm ba (ellipsis), hay thay thế bằng chuỗi tùy chỉnh.
Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.
CSS text-overflow property là gì?
CSS text-overflow property là một phần của CSS Overflow Module Level 3, cho phép kiểm soát việc hiển thị của văn bản khi nội dung vượt quá kích thước của khung hiển thị. Thuộc tính này được sử dụng để chỉ định cách hiển thị của văn bản khi không thể hiển thị toàn bộ nội dung. Với CSS text-overflow property, bạn có thể cắt bớt văn bản hoặc thêm dấu chấm ba để biểu thị rõ ràng hơn cho người dùng.
Ai sẽ dùng CSS text-overflow property
CSS text-overflow property là một thuộc tính quan trọng trong CSS và được sử dụng rộng rãi trong các trang web và ứng dụng web. Nó rất hữu ích để kiểm soát việc hiển thị của văn bản khi nội dung vượt quá kích thước của khung hiển thị, giúp trang web hoạt động tốt hơn và mang lại trải nghiệm người dùng tốt hơn.
CSS text-overflow property là thuộc tính được sử dụng để điều chỉnh việc hiển thị của văn bản khi không thể hiển thị toàn bộ nội dung. Thuộc tính này có các giá trị như clip, ellipsis, string, initial và inherit để quyết định cách hiển thị của văn bản.
- Giá trị “clip”: Là giá trị mặc định, cắt bớt văn bản ở đỉnh và đáy phần tử chứa nó.
- Giá trị “ellipsis”: Hiển thị dấu chấm ba (…) ở cuối phần tử chứa văn bản khi nội dung vượt quá kích thước của phần tử.
- Giá trị “string”: Thay thế văn bản bị cắt bớt bằng một chuỗi do lập trình viên tự định nghĩa. Chỉ hoạt động trên trình duyệt Firefox.
- Giá trị “initial”: Đặt giá trị của thuộc tính về giá trị mặc định.
- Giá trị “inherit”: Kế thừa giá trị của thành phần cha.
Hướng dẫn CSS text-overflow property
Để sử dụng CSS text-overflow property, chúng ta cần phải kết hợp nó với các thuộc tính khác như white-space và overflow. Dưới đây là cách sử dụng CSS text-overflow property:
.element {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Các thuộc tính này được sử dụng để cắt bớt nội dung và hiển thị dấu chấm ba khi nội dung vượt quá kích thước của phần tử chứa nó.
Ví dụ CSS text- overflow property
CSS text-overflow property cho phép bạn chỉ định cách xử lý văn bản khi nó vượt quá giới hạn của một phần tử.
Giá trị mặc định của thuộc tính này là clip, có nghĩa là văn bản sẽ bị cắt đi khi nó vượt quá giới hạn của phần tử.
Để chỉ định cách xử lý văn bản khi nó vượt quá giới hạn của một phần tử, bạn có thể sử dụng một trong các giá trị sau:
clip: Văn bản sẽ bị cắt đi khi nó vượt quá giới hạn của phần tử.ellipsis: Văn bản sẽ được thay thế bằng dấu ba chấm (…) khi nó vượt quá giới hạn của phần tử.truncate: Văn bản sẽ bị cắt đi ở đầu khi nó vượt quá giới hạn của phần tử.ellipsis-end: Văn bản sẽ được thay thế bằng dấu ba chấm (…) ở cuối khi nó vượt quá giới hạn của phần tử.ellipsis-middle: Văn bản sẽ được thay thế bằng dấu ba chấm (…) ở giữa khi nó vượt quá giới hạn của phần tử.
Ví dụ:
// Để hiển thị dấu ba chấm (...) khi văn bản vượt quá giới hạn của một phần tử
div {
text-overflow: ellipsis;
}Ví dụ này sẽ hiển thị dấu ba chấm (…) khi văn bản vượt quá giới hạn của phần tử div.
Dưới đây là một số ví dụ cụ thể về cách sử dụng CSS text-overflow property:
Để hiển thị dấu ba chấm (…) khi văn bản vượt quá giới hạn của một phần tử, bạn có thể sử dụng text-overflow: ellipsis;.
div {
text-overflow: ellipsis;
}Để cắt bỏ văn bản khi nó vượt quá giới hạn của một phần tử, bạn có thể sử dụng text-overflow: clip;.
div {
text-overflow: clip;
}Để cắt bỏ văn bản ở đầu khi nó vượt quá giới hạn của một phần tử, bạn có thể sử dụng text-overflow: truncate;.
div {
text-overflow: truncate;
}Để hiển thị dấu ba chấm (…) ở cuối khi văn bản vượt quá giới hạn của một phần tử, bạn có thể sử dụng text-overflow: ellipsis-end;.
div {
text-overflow: ellipsis-end;
}Để hiển thị dấu ba chấm (…) ở giữa khi văn bản vượt quá giới hạn của một phần tử, bạn có thể sử dụng text-overflow: ellipsis-middle;.
div {
text-overflow: ellipsis-middle;
}Ưu và Nhược điểm CSS text- overflow property
Ưu điểm của CSS text-overflow property
- Giúp kiểm soát và quản lý hiển thị của văn bản khi nội dung vượt quá kích thước của khung hiển thị.
- Tăng tính thẩm mỹ cho trang web hoặc ứng dụng web bằng cách hiển thị dấu chấm ba thay vì cắt bớt văn bản một cách ngắn gọn.
- Có thể sử dụng chuỗi tùy chỉnh để thay thế cho văn bản bị cắt bớt, giúp trang web trở nên độc đáo hơn.
Nhược điểm của CSS text-overflow property
- Không hoạt động trên một số phiên bản của các trình duyệt web cũ.
- Có thể làm cho nội dung bị cắt quá nhiều, gây ra khó khăn khi người dùng muốn đọc toàn bộ nội dung.
Lời khuyên CSS text-overflow property
Khi sử dụng CSS text-overflow property, bạn nên cân nhắc đến việc hiển thị đầy đủ nội dung để người dùng có thể dễ dàng đọc và hiểu được thông tin. Đồng thời, bạn cũng nên kiểm tra xem thuộc tính này có hoạt động trên các phiên bản trình duyệt của người dùng hay không để đảm bảo tính tương thích.
Kết luận
CSS text-overflow property là một trong những thuộc tính quan trọng trong CSS, giúp kiểm soát việc hiển thị của văn bản khi nội dung vượt quá kích thước của khung hiển thị. Với các giá trị khác nhau như clip, ellipsis và string, bạn có thể quyết định cách hiển thị của văn bản một cách linh hoạt. Tuy nhiên, bạn cũng cần phải cân nhắc đến tính tương thích của thuộc tính này trên các phiên bản trình duyệt khác nhau để đảm bảo tính ổn định của trang web hoặc ứng dụng web.