Định nghĩa và sử dụng
Thuộc tính text trong css3 dùng để định dạng các dạng text ngoài dạng đã được định nghĩa ở css2 (Xem thêm về text trong css2).
Thuộc tính của text trong css3:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| text-justify | auto | text-justify: auto; | Trình duyệt tự động sắp xếp text cho thành phần. |
| distribute | text-justify: distribute; | Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự, giá trị này thường được sử dụng cho các ngôn ngữ như tiếng Nhật. | |
| inter-cluster | text-justify: inter-cluster; | Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự, giá trị này thường được sử dụng cho các ngôn ngữ Đông Nam Á, như Thái. | |
| inter-ideograph | text-justify: inter-ideograph; | Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự, giá trị này thường được sử dụng cho các ngôn ngữ CJK. | |
| inter-word | text-justify: inter-word; | Tăng hoặc giảm khoảng cách giữa các từ, được sử dụng cho ngôn ngữ có từ cách biệt như tiếng Anh hoặc tiếng Hàn. | |
| kashida | text-justify: kashida; | Tăng hoặc giảm khoảng cách giữa các từ, thường được sử dụng trong các ký tự thư pháp, giá trị này phù hợp với tiêu đề trong CSS3. | |
| none | text-justify: none; | Không hiển thị dạng của Justify, được dùng để reset lại các giá trị của text-justify | |
| text-outline (Chưa được trình duyệt hỗ trợ) |
độ mờ | text-outline: 10px 10px #cc0000; | Text có vùng biên góc mờ. |
| mã màu | Màu cho vùng biên. | ||
| bề dày | Tạo bề dày cho vùng biên, với đơn vị là px, em, ... | ||
| text-overflow | clip | text-overflow: clip; | Xén bớt vùng text. |
| ellipsis | text-overflow: ellipsis; | Cắt một đoạn text và thay thế bằng dấu 3 chấm. | |
| chuỗi | text-overflow: 'còn tiếp'; | Cắt một đoạn text và thay bằng một chuỗi khác. | |
| text-shadow | đơn vị (chiều ngang) |
text-shadow: 2px 2px 2px #cc0000; | Xác định vị trí của bóng theo chiều ngang, có thể dùng giá trị âm. |
| đơn vị (chiều dọc) |
Vị trí của bóng thẳng đứng, có thể dùng giá trị âm. | ||
| đơn vị (Độ nhòe - blur) |
Khoảng cách nhòe của bóng. | ||
| mã màu | Màu sắc của bóng | ||
| text-wrap (Chưa được trình duyệt hỗ trợ) |
none | text-wrap: none; | Không sử dụng phá vỡ dòng. |
| normal | text-wrap: normal; | Trả về mặc định. | |
| unrestricted | text-wrap: unrestricted; | Dòng có thể bị ngắt giữa 2 ký tự. | |
| suppress | text-wrap: suppress; | Việc ngắt dòng bị ngăn chặn bên trong thành phần, trình duyệt chỉ ngắt dòng bên trong thành phần khi thành phần không có điểm ngắt khác trong dòng. |
Ví dụ
HTML viết:
<html> <head></head> <body> <p>HỌC WEB CHUẨN</p> </body> </html>
CSS viết:
p.txtPr {
color: #cc0000;
font-size: 120%;
font-weight: bold;
}
Hiển thị trình duyệt khi chưa có text-shadow:
HỌC WEB CHUẨN
Thêm thuộc tính text-shadow vào CSS:
p.txtPr {
color: #cc0000;
font-size: 120%;
font-weight: bold;
text-shadow: 0 0 3px blue;
}
Hiển thị trình duyệt khi có text-shadow:
HỌC WEB CHUẨN
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính text:
| Trình duyệt PC | Smartphone - Tablets | |||||||
 |
 |
 |
 |
 |
 |
 |
 |
|
| text-justify | 6 | 3 | 5 | 4 | 3 | 3.2 | 2.1 | 7.5 |
| text-overflow | 6 | 7 | 10 | 4 | 4 | 3.2 | 2.1 | 7.5 |
| text-shadow | 10 X |
3 | 10 | 4 | 4 | 3.2 | 2.1 | 8 X |