Thuộc tính overflow-wrap trong CSS
Bùi Tấn Lực - 328
- 01/10/2025
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, 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 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>
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 *
