Thuộc tính word-wrap trong CSS
Bùi Tấn Lực - 885
- 01/10/2025
Chức năng của Thuộc tính word-wrap trong CSS
Thuộc tính word-wrap trong CSS dùng để ngắt dòng các từ quá dài bị tràn ra ngoài phần tử cha hoặc ngoài màn hình, giúp người dùng đọc được hết được nội dung, vì những chữ bị tràn ra ngoài sẽ khó đọc được, ngoài ra thuộc tính overflow-wrap được nâng cấp từ word-wrap và nên sử dụng.
Cú pháp của Thuộc tính word-wrap trong CSS
word-wrap: giatri;
giatri: Giá trị để ngắt dòng các từ quá dài bị tràn ra ngoài (Ví dụ: break-word)
Các giá trị của Thuộc tính word-wrap trong CSS
break-word: Ngắt từ dài để chúng xuống hàng, ngăn chặn việc tràn nội dung.
normal: Giá trị mặc định, từ dài có thể bị tràn ra ngoài hộp chứa.
initial: Đặt lại về giá trị mặc định ban đầu.
inherit: Kế thừa giá trị của phần tử cha.
Code Thuộc tính word-wrap trong CSS
word-wrap: break-word;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính word-wrap trong CSS</title>
<style>
#divtong{width:300px;float:left;height:auto}
.divwwrap{width:100%;float:left;height:auto;padding:10px;margin-bottom:10px;background:#ddd;}
</style>
</head>
<body>
<h1>Code Thuộc tính word-wrap trong CSS</h1>
<p>Dùng để ngắt dòng các từ quá dài bị tràn ra ngoài phần tử cha hoặc ngoài màn hình, giúp người dùng đọc được hết được nội dung, vì những chữ bị tràn ra ngoài sẽ khó đọc được, ngoài ra thuộc tính overflow-wrap được nâng cấp từ word-wrap và nên sử dụng:</p>
<div id="divtong">
<div class="divwwrap" style="word-wrap: normal">
<h3>word-wrap: normal</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" style="word-wrap: break-word">
<h3>word-wrap: break-word</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" style="word-wrap: initial">
<h3>word-wrap: initial</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" style="word-wrap: inherit">
<h3>word-wrap: inherit</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
</div>
</body>
</html>
Word-wrap trong CSS được sử dụng như thế nào?
Trong thực tế, word-wrap hữu ích khi nội dung có những chuỗi ký tự dài khiến phần tử bị tràn ngang. Thuộc tính này giúp trình duyệt chủ động xuống dòng để nội dung nằm gọn trong phạm vi hiển thị, đặc biệt với các đoạn văn, URL hoặc chuỗi không có khoảng trắng.
Khi nào nên dùng word-wrap để xử lý chữ quá dài?
Nên cân nhắc sử dụng word-wrap khi một phần tử có chiều rộng giới hạn nhưng bên trong xuất hiện chuỗi ký tự dài liên tục. Trường hợp thường gặp là URL dài, mã sản phẩm, tên tệp hoặc dữ liệu được tạo tự động từ hệ thống.
Ví dụ, một đường dẫn quá dài có thể làm hộp nội dung bị kéo rộng và tạo thanh cuộn ngang trên màn hình nhỏ. Khi đó, cho phép trình duyệt ngắt chuỗi sẽ giúp bố cục ổn định hơn.
.content {
word-wrap: break-word;
}
Cách này đặc biệt hữu ích với giao diện responsive, nơi chiều rộng của phần tử thay đổi theo kích thước màn hình. Tuy nhiên, không nên áp dụng tùy tiện cho mọi nội dung vì việc ngắt một chuỗi tại vị trí bất kỳ có thể làm giảm khả năng đọc.
Word-wrap khác gì với overflow-wrap?
Về cách sử dụng, word-wrap và overflow-wrap có thể khiến người mới học CSS cảm thấy đây là hai thuộc tính hoàn toàn khác nhau. Thực tế, word-wrap là tên được duy trì để tương thích với các mã CSS cũ và hoạt động như một bí danh của overflow-wrap.
Vì vậy, khi viết CSS mới, overflow-wrap thường là lựa chọn rõ nghĩa hơn vì tên thuộc tính thể hiện trực tiếp mục đích xử lý nội dung có nguy cơ tràn khỏi phần tử.
.content {
overflow-wrap: break-word;
}
Nếu website đang sử dụng word-wrap, không nhất thiết phải thay đổi ngay. Quan trọng là hiểu đúng hành vi của thuộc tính và lựa chọn cách viết phù hợp với hệ thống CSS đang triển khai.
Cách kết hợp word-wrap với các thuộc tính CSS liên quan
Trong một giao diện thực tế, chỉ xử lý việc xuống dòng đôi khi chưa đủ. Có thể kết hợp word-wrap với chiều rộng, khoảng cách và cách hiển thị văn bản để kiểm soát bố cục tốt hơn.
.box {
width: 100%;
word-wrap: break-word;
overflow: hidden;
}
Trong ví dụ trên, word-wrap đảm nhiệm việc xử lý chuỗi dài, còn overflow kiểm soát phần nội dung vượt ra ngoài giới hạn của phần tử. Cách kết hợp này phù hợp với các khối nội dung có chiều rộng cố định hoặc thay đổi theo màn hình.
Khi xây dựng giao diện, nên ưu tiên kiểm tra trên cả màn hình lớn và thiết bị di động để đảm bảo văn bản dài không phá vỡ bố cục. Với những trường hợp cần kiểm soát cách ngắt dòng chính xác hơn, có thể xem xét thêm các thuộc tính CSS chuyên về xử lý dòng và khoảng trắng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính word-wrap 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 *
