Bùi Tấn Lực - 31
- 01/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính word-wrap trong CSS
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á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
<!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;}
#normal{word-wrap: normal}
#break-word{word-wrap: break-word}
#initial{word-wrap: initial}
#inherit{word-wrap: inherit}
</style>
</head>
<body>
<h1>Code Thuộc tính word-wrap trong CSS</h1>
<div id="divtong">
<div class="divwwrap" id="normal">
<h3>word-wrap: normal</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" id="break-word">
<h3>word-wrap: break-word</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" id="initial">
<h3>word-wrap: initial</h3>
Xin chàoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
</div>
<div class="divwwrap" id="inherit">
<h3>word-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 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 *
