Thuộc tính word-break trong CSS
Trần Thị Vân - 1285
- 18/07/2025
Chức năng của Thuộc tính word-break trong CSS
Thuộc tính word-break trong CSS dùng để quy định cách xuống hàng đối với các phần tử HTML có những từ quá dài làm tràn ra ngoài.
Cú pháp của Thuộc tính word-break trong CSS
word-break: giatri;
giatri: Giá trị để quy định cách xuống hàng đối với các phần tử HTML có những từ quá dài làm tràn ra ngoài (Ví dụ: break-word, break-all,.....)
Các giá trị của Thuộc tính word-break trong CSS
break-all: Làm cho các từ quá dài hoặc tự bình thường khi hết hàng là tự động xuống hàng, nhưng có chữ trong một từ mà có chữ xuống hàng có chữ không xuống hàng, cài này gây khó đọc.
break-word: Giúp các từ quá dài khi hết hàng sẽ tự động xuống hàng, các từ nào dài hơn 1 hàng thì nó sẽ nằm hơn 1 hàn.
Code Thuộc tính word-break trong CSS
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính word-break trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#divtong{width:300px; float:left; height:auto}
.divcon{width:100%; float:left; height:auto; background:#ddd; padding:10px; margin-bottom:10px}
h4{margin:0px}
</style>
</head>
<body>
<h1>Code Thuộc tính word-break trong CSS</h1>
<p>Dùng để quy định cách xuống hàng đối với các phần tử HTML có những từ quá dài làm tràn ra ngoài:</p>
<div id="divtong">
<div class="divcon" style="word-break:break-word;">
<h4>word-break:break-word;</h4>
<p>Giúp các từ quá dàiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii khi hết hàng sẽ tự động xuống hàng, các từ nào dài hơn 1 hàng thì nó sẽ nằm hơn 1 hàng.</p>
</div>
<div class="divcon" style="word-break:break-all;">
<h4>word-break:break-all;</h4>
<p>Làm cho các từ quá dài hoặc tự bình thường khi hết hàng là tự động xuống hànggggggggggggggggggggggggggggggggggggggggggg, nhưng có chữ trong một từ mà có chữ xuống hàng có chữ không xuống hàng, cài này gây khó đọc.</p>
</div>
<div class="divcon" style="word-break:auto-phrase;">
<h4>word-break:auto-phrase;</h4>
<p>Thuộc tính word-breakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk trong CSS dùng để quy định cách xuống hàng đối với các phần tử HTML</p>
</div>
<div class="divcon" style="word-break:keep-all;">
<h4>word-break:keep-all;</h4>
<p>Thuộc tính word-breakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk trong CSS dùng để quy định cách xuống hàng đối với các phần tử HTML</p>
</div>
<div class="divcon" style="word-break:normal;">
<h4>word-break:normal;</h4>
<p>Thuộc tính word-breakkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk trong CSS dùng để quy định cách xuống hàng đối với các phần tử HTML</p>
</div>
</div>
</body>
</html>
Ứng dụng word-break trong thiết kế giao diện thực tế
Trong giao diện thực tế, nội dung không phải lúc nào cũng có độ dài cố định. Tên sản phẩm, đường dẫn, mã đơn hàng, địa chỉ email hoặc chuỗi ký tự dài có thể khiến phần tử bị tràn khi hiển thị trên màn hình nhỏ. word-break giúp kiểm soát cách trình duyệt ngắt những chuỗi này để nội dung nằm gọn trong khu vực được thiết kế.
Thay vì áp dụng một giá trị cho toàn bộ website, nên lựa chọn cách ngắt dựa trên loại nội dung. Văn bản thông thường cần ưu tiên khả năng đọc, trong khi chuỗi không có khoảng trắng lại cần ưu tiên giữ bố cục không bị phá vỡ.
Xử lý văn bản dài trên màn hình nhỏ
Trên điện thoại, chiều rộng nội dung bị giới hạn nên một chuỗi dài không có khoảng trắng rất dễ tràn ra ngoài phần tử. Trường hợp này thường xuất hiện với URL, email, mã sản phẩm hoặc chuỗi ký tự được tạo tự động.
Có thể cho phép trình duyệt ngắt chuỗi khi cần để nội dung luôn nằm trong chiều rộng của phần tử:
.content {
word-break: break-word;
}
Cách xử lý này đặc biệt hữu ích với các khối nội dung có chiều rộng cố định hoặc giao diện responsive. Tuy nhiên, không nên ép mọi văn bản phải ngắt tùy ý vì việc chia nhỏ từ quá mức có thể làm giảm khả năng đọc.
Chọn word-break phù hợp để tránh vỡ bố cục
Giá trị của word-break nên được chọn dựa trên đặc điểm của nội dung. Với đoạn văn thông thường, ưu tiên cách hiển thị tự nhiên. Với chuỗi dài không có khoảng trắng, có thể sử dụng cách ngắt mạnh hơn để ngăn phần tử bị tràn.
Ví dụ, một khu vực chứa mã hoặc chuỗi ký tự dài có thể cần cho phép ngắt ngay tại vị trí cần thiết:
.code-value {
word-break: break-all;
}
Ngược lại, nếu nội dung chủ yếu là câu văn, việc ngắt ký tự quá mạnh có thể khiến dòng chữ khó đọc. Vì vậy, word-break không nên được xem là giải pháp mặc định cho mọi phần tử; hãy xác định loại nội dung và ưu tiên trải nghiệm đọc trước khi áp dụng.
Word-break có ảnh hưởng đến khả năng đọc nội dung không?
Có. Cách ngắt dòng ảnh hưởng trực tiếp đến nhịp đọc, đặc biệt với những đoạn văn dài. Khi trình duyệt chia nhỏ từ hoặc chuỗi ký tự ở nhiều vị trí, người đọc có thể khó nhận diện nội dung hơn.
Vì vậy, nên sử dụng word-break có chọn lọc. Những nội dung như tiêu đề, đoạn văn và mô tả nên giữ cách xuống dòng tự nhiên khi có thể; còn URL, mã sản phẩm, mã định danh hoặc chuỗi không có khoảng trắng mới là những trường hợp cần đặc biệt quan tâm đến khả năng ngắt.
Một giao diện tốt không chỉ đảm bảo nội dung không tràn khỏi khung mà còn phải giữ được sự dễ đọc trên nhiều kích thước màn hình. Đây là lý do việc lựa chọn cách ngắt phù hợp quan trọng hơn việc đơn giản áp dụng một giá trị word-break cho toàn bộ trang.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính word-break 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 *
