Thuộc tính overflow-wrap trong CSS
Bùi Tấn Lực - 933
- 01/10/2025
Chức năng của Thuộc tính overflow-wrap trong CSS
Thuộc tính overflow-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, overflow-wrap nằm trong CSS3 và được nâng từ word-wrap.
Cú pháp của Thuộc tính overflow-wrap trong CSS
overflow-wrap: giatri;
giatri: Giá trị để 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 (Ví dụ: anywhere, break-word,....)
Các giá trị của Thuộc tính overflow-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.
anywhere: 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 overflow-wrap trong CSS
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính overflow-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 overflow-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, overflow-wrap nằm trong CSS3 và được nâng từ word-wrap:</p>
<div id="divtong">
<div class="divwwrap" style="overflow-wrap: normal">
<h3>overflow-wrap: normal</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" style="overflow-wrap: break-word">
<h3>overflow-wrap: break-word</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" style="overflow-wrap: anywhere">
<h3>overflow-wrap: anywhere</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" style="overflow-wrap: initial">
<h3>overflow-wrap: initial</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" style="overflow-wrap: inherit">
<h3>overflow-wrap: inherit</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
</div>
</body>
</html>
Cách xử lý nội dung dài bị tràn trong CSS với overflow-wrap
Khi văn bản, URL hoặc chuỗi ký tự quá dài, nội dung có thể vượt khỏi chiều rộng của phần tử và làm bố cục bị lệch. overflow-wrap giúp trình duyệt chủ động ngắt chuỗi khi cần, từ đó giữ nội dung nằm trong khu vực hiển thị mà không phải thay đổi cấu trúc HTML.
Khi nào nên dùng overflow-wrap để ngăn nội dung tràn
Thuộc tính này đặc biệt hữu ích với những nội dung không có khoảng trắng để trình duyệt tự xuống dòng, chẳng hạn URL dài, mã định danh hoặc chuỗi ký tự liên tục. Đây cũng là cách đơn giản để bảo vệ các khối nội dung có chiều rộng cố định trên màn hình nhỏ.
.content {
overflow-wrap: break-word;
}
Với cách thiết lập này, trình duyệt có thể ngắt chuỗi tại vị trí phù hợp khi nội dung không còn đủ chỗ. Văn bản thông thường vẫn được hiển thị tự nhiên, trong khi những chuỗi quá dài sẽ không dễ dàng phá vỡ bố cục.
overflow-wrap kết hợp với width và max-width
overflow-wrap phát huy hiệu quả rõ rệt khi phần tử có giới hạn chiều rộng. width xác định kích thước mong muốn, còn max-width giúp phần tử không vượt quá không gian mà bố cục cho phép.
.box {
width: 100%;
max-width: 600px;
overflow-wrap: break-word;
}
Cách kết hợp này phù hợp với nội dung trong bài viết, hộp thông tin hoặc khu vực hiển thị dữ liệu trên nhiều kích thước màn hình. Khi không gian thu hẹp, phần tử có thể co lại và chuỗi dài được ngắt thay vì tràn sang khu vực bên cạnh.
Xử lý URL, chuỗi ký tự dài và nội dung không có khoảng trắng
URL dài và chuỗi ký tự liên tục thường là nguyên nhân khó phát hiện của lỗi tràn ngang. Chúng có thể khiến người dùng phải kéo trang theo chiều ngang, đặc biệt trên thiết bị di động.
a {
overflow-wrap: break-word;
}
Áp dụng cho liên kết giúp URL dài có thể xuống dòng khi cần mà không phải chèn thêm ký tự vào nội dung. Với những trường hợp cần kiểm soát cách ngắt mạnh hơn, có thể cân nhắc thêm các thuộc tính xử lý ngắt dòng khác, nhưng không nên sử dụng chúng mặc định nếu chỉ cần ngăn nội dung vượt khỏi vùng hiển thị.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính overflow-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 *
