Thuộc tính word-wrap trong CSS
Bùi Tấn Lực - 835
- 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>
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
Bùi Tấn Lực
Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ
Chia sẻ nội dung đánh giá của bạn về Thuộc tính word-wrap trong CSS
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 *
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 *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
