Để chỉ định các quy tắc ngắt từ trong CSS3, hãy sử dụng thuộc tính ngắt từ. Thuộc tính này được sử dụng để ngắt dòng. Các giá trị có thể bao gồm bình thường, ngắt tất cả, giữ nguyên, ngắt từ, v.v.
Sau đây là mã để chỉ định các quy tắc ngắt từ bằng CSS3 -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
span {
display: inline-block;
font-weight: bold;
font-size: 20px;
margin-right: 20px;
}
div {
width: 50px;
border: 3px solid #3008c0;
margin: 10px;
padding: 10px;
font-size: 18px;
display: inline-block;
margin-right: 20px;
}
.normal {
word-break: normal;
}
.break-all {
word-break: break-all;
}
.break-word {
word-break: break-word;
}
</style>
</head>
<body>
<h1>Word Breaking Rules Example</h1>
<span>NORMAL </span> <span>BREAK ALL</span> <span>BREAK WORD</span>
<br />
<div class="normal">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-all">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="break-word">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
