Các text-transformbất động sản trong CSS kiểm soát trường hợp văn bản và vốn.
.lowercase ( text-transform: lowercase; )Giá trị chuyển đổi văn bản
lowercasebiến tất cả các chữ cái trong văn bản đã chọn thành chữ thường.uppercaselàm cho tất cả các chữ cái trong văn bản đã chọn viết hoa.capitalizeviết hoa chữ cái đầu tiên của mỗi từ trong văn bản đã chọn.noneđể lại chữ hoa và cách viết hoa của văn bản chính xác như khi nhập.inheritcung cấp cho văn bản chữ hoa và chữ viết hoa gốc của nó.
Bản demo dưới đây cho thấy lowercase, uppercasevà capitalizeđược sử dụng. Hãy xem tab HTML để xem văn bản ban đầu được viết như thế nào, sau đó quay lại tab kết quả để xem nó sau khi CSS được áp dụng.
Xem Pen 0f4293fce0d14aafc3818c950ab0ded3 của mariemosley (@mariemosley) trên CodePen.
Điểm quan tâm
capitalizesẽ viết hoa các từ xuất hiện bên trong dấu ngoặc đơn hoặc dấu ngoặc kép và chữ cái đầu tiên sau dấu gạch ngang. Nó sẽ không viết hoa chữ cái đầu tiên sau một số, vì vậy những ngày như “ngày 4 tháng 2 năm 2015” sẽ không chuyển thành “ngày 4 tháng 2 năm 2015”.
capitalizechỉ ảnh hưởng đến các chữ cái đầu tiên của từ. Nó sẽ không thay đổi trường hợp của các chữ cái còn lại trong một từ. Ví dụ: nếu bạn capitalizemột từ đã có tất cả các chữ cái viết hoa, các chữ cái khác trong từ đó sẽ không chuyển sang chữ thường. Điều này thật tuyệt khi văn bản của bạn bao gồm một từ viết tắt hoặc chữ viết tắt không được bao gồm bất kỳ chữ cái thường nào.
CSS không thể viết “chữ hoa đầu đề”, kiểu viết hoa được sử dụng trong tiêu đề sách, phim, bài hát và bài thơ, trong đó các bài báo là chữ thường (như trong “Raiders of the Lost Ark”). Tuy nhiên, có các giải pháp JavaScript dành cho tiêu đề, bao gồm toTitleCase () của David Gouch.
Thêm thông tin
- biến đổi văn bản tại MDN
- biến đổi văn bản trong W3C Spec
- Lưu ý về khả năng truy cập của văn bản chữ hoa từ WebAIM
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Bất kì | Bất kì | Bất kì | Bất kì | Bất kì | Bất kì | Bất kì |
Firefox hỗ trợ các quy tắc viết hoa theo ngôn ngữ cụ thể cho các ngôn ngữ Turkic, tiếng Đức, tiếng Hà Lan và tiếng Hy Lạp không được các trình duyệt khác hỗ trợ. Firefox cũng là trình duyệt duy nhất hỗ trợ text-transform: full-width;, có thể giúp cải thiện khả năng đọc của văn bản bao gồm hỗn hợp chữ viết latin và Đông Á. Xem chi tiết tại MDN.