Style for text, word

Property
Value

text-decoration-line

  • underline: gạch dưới

  • overline: gạch trên

  • line-through: gạch giữa

  • none: không có dấu gạch

Note: Có thể kết hợp giữa 3 kiểu trên

text-decoration-style

  • solid: gạch liền

  • double: gạch đôi

  • dotted: gạch chấm

  • dashed: gạch ngang đứt quãng

  • wavy: gạch hình sóng

text-decoration-color

Tên màu ở hệ hexal, RGB,…

text-decoration-thickness

apx: Độ dày của dấu gạch

text-decoration

Là cú pháp viết tắt của 4 thuộc tính trên theo thứ tự: line color style thickness

text-indent

apx: Khoảng cách chữ lui vào đầu dòng

text-transform

  • capitalize: chuyển tất cả các chữ cái đầu tiên của mỗi từ sang in hoa

  • uppercase: chuyển tất cả các chữ cái sang in hoa

  • lowercase: chuyển tất cả các chữ cái sang in thường

text-align

  • left: căn chỉnh văn bản sang bên trái

  • right: căn chỉnh văn bản sang bên phải

  • center: Căn chỉnh văn bản ở chính giữa

  • justify: Kéo dài các dòng để mỗi dòng có chiều rộng bằng nhau

text-shadow

apx bpx cpx <Colorname>

  • a: thể hiện chiều ngang của bóng. Số dương thì bóng đổ về phía bên phải, số âm thì bóng đổ về phía bên trái

  • b: thể hiện chiều dọc của bóng. Số dương thì bóng đổ xuống dưới, số âm thì bóng đổ lên trên

  • c: độ mờ của bóng. Số càng lớn thì độ mờ càng cao

  • <Colorname>: tên màu, có thể ở hệ hexal, RGB,...

user-select

  • none: người dùng không thể chọn văn bản (Chống copy)

  • all: người dùng có thể chọn văn bản với 1 lần nhấp chuột

  • text: người dùng có thể chọn văn bản với 2 lần nhấp chuột

word-wrap

break-word: từ sẽ bị ngắt giữa chừng khi tràn khỏi container

line-height

apx: Khoảng cách giữa hai dòng

word-spacing

apx: khoảng cách giữa hai từ

text-overflow

ellipsis: dấu () được thể hiện cho phần văn bản được cắt bớt nếu nó quá dài so với kích thước của container.

⛔️ Thuộc tính này chỉ hoạt động khi nó đi kèm với thuộc tính white-space: nowrapoverflow: hidden

white-space

  • normal: chữ tự động xuống dòng khi vượt quá kích thước container

  • nowrap: chữ sẽ không xuống dòng khi gặp thẻ <br/>

Last updated