Thuộc tính text

Đị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
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
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

THÔNG BÁO LỖI