text-justify
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thuộc tính CSS text-justify xác định loại căn chỉnh nào nên được áp dụng cho văn bản khi text-align: justify; được đặt trên một phần tử.
Cú pháp
text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* Giá trị không dùng nữa */
/* Giá trị toàn cục */
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: revert-layer;
text-justify: unset;
Giá trị
none-
Tắt căn chỉnh văn bản. Điều này có tác dụng tương tự như không đặt
text-aligngì cả, mặc dù hữu ích nếu bạn cần bật/tắt căn chỉnh vì một lý do nào đó. auto-
Trình duyệt chọn loại căn chỉnh tốt nhất cho tình huống hiện tại dựa trên sự cân bằng giữa hiệu suất và chất lượng, và cũng dựa trên điều phù hợp nhất với ngôn ngữ của văn bản (ví dụ: tiếng Anh, ngôn ngữ CJK, v.v.). Đây là căn chỉnh mặc định được sử dụng nếu
text-justifykhông được đặt. inter-word-
Văn bản được căn chỉnh bằng cách thêm khoảng cách giữa các từ (thực tế là thay đổi
word-spacing), phù hợp nhất với các ngôn ngữ phân tách từ bằng dấu cách, như tiếng Anh hoặc tiếng Hàn. inter-character-
Văn bản được căn chỉnh bằng cách thêm khoảng cách giữa các ký tự (thực tế là thay đổi
letter-spacing), phù hợp nhất với các ngôn ngữ như tiếng Nhật. distribute-
Hiển thị hành vi giống như
inter-character; giá trị này được giữ lại để tương thích ngược.
Định nghĩa chính thức
| Initial value | auto |
|---|---|
| Applies to | inline-level and table-cell elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp chính thức
text-justify =
[ auto | none | inter-word | inter-character | ruby ] ||
no-compress
Ví dụ
Minh họa các giá trị khác nhau của text-justify
p {
font-size: 1.5em;
border: 1px solid black;
padding: 10px;
width: 95%;
margin: 10px auto;
text-align: justify;
}
.none {
text-justify: none;
}
.auto {
text-justify: auto;
}
.dist {
text-justify: distribute;
}
.word {
text-justify: inter-word;
}
.char {
text-justify: inter-character;
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Text Module Level 3 # text-justify-property |