Thuộc tính word-break dùng để chỉ định cách ngắt từ khi từ chạm cuối dòng. Việc ngắt dòng có thể xảy ra ở những vị trí nhất định như dấu cách, dấu gạch ngang.
Cú pháp:
word-break: normal|break-all|keep-all|break-word|initial|inherit;
Giá trị mặc định: Normal
Thuộc tính: Dưới đây là các thuộc tính word-break:
- normal
- break-all
- keep-all
- initial
- inherit
1. normal: Thuộc tính này sử dụng các quy tắc ngắt dòng mặc định của trình duyệt.
Cú pháp:
word-break: normal (default value)
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS word-break Property
</title>
<style>
p {
width: 140px;
border: 1px solid #000000;
}
gfg.a {
word-break: normal;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>word-break: normal (default):</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks.
A computer science portal for geeks.
</p>
</center>
</body>
</html>
Đầu ra:
2. break-all: Dùng để ngắt từ ở bất kỳ ký tự nào, ngăn tràn nội dung.
Cú pháp:
break-word: break-all
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS word-break Property
</title>
<style>
p {
width: 142px;
border: 1px solid #000000;
}
p.gfg {
word-break: break-all;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>word-break: break-all;</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks. A
computer science portal for geeks .
</p>
</center>
</body>
</html>
Đầu ra:
3. Keep-all: Nó tương tự như giá trị normal.
Lưu ý: Không nên dùng thuộc tính này cho văn bản tiếng Trung/Nhật/Hàn.
Cú pháp:
word-break: Keep-all;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS word-break Property
</title>
<style>
p {
width: 140px;
border: 1px solid #000000;
color:black;
}
p.gfg {
word-break: keep-all;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>word-break: Keep-all</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks.A
computer science portal for geeks.
</p>
</center>
</body>
</html>
Đầu ra:
4. break-word: Dùng để ngắt từ tại các điểm tùy ý, ngăn tràn nội dung.
Cú pháp:
word-break: break-word;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS word-break Property
</title>
<style>
p {
width: 140px;
border: 1px solid #000000;
color:black;
}
p.gfg {
word-break: break-word;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>word-break: break-word</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks.A
computer science portal for geeks.
</p>
</center>
</body>
</html>
Đầu ra:
5. initial: Đặt thuộc tính về giá trị mặc định của nó.
Cú pháp:
word-break:initial;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>
CSS word-break Property
</title>
<style>
p {
width: 140px;
border: 1px solid #000000;
color:black;
}
p.gfg {
word-break:initial;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>word-break:initial;</h2>
<p class="gfg">
GeeksforGeeksGeeksGeeks.A
computer science portal for geeks.
</p>
</center>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Dưới đây là danh sách các trình duyệt hỗ trợ word-break Property:
- Google Chrome
- Edge
- Firefox
- Opera
- Safari