p.test1 {
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}

p.test2 {
  white-space: nowrap; 
  width: 400px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

Đoạn sau chứa văn bản dài bị tràn ra ngoài box chứa nó .

Quantrimang. com là mạng xã hội về khoa học công nghệ tiên tiến

Quantrimang. com là mạng xã hội về khoa học công nghệ tiên tiến

Ví dụ 2: Hiển thị nội dung bị tràn khi di chuột qua phần tử:

div.test:hover {
  overflow: visible;
}

Di chuột qua hai div bên dưới, để xem hàng loạt đoạn text .

Word Wrap

Thuộc tính word-wrap cho phép đoạn text xuống dòng nếu quá dài, có thể gây hiện tượng đứt gãy một từ.

Hai giá trị tiêu biểu vượt trội nhất là :

• normal: hiển thị theo mặc định, từ dài có thể bị tràn ra ngoài box (mặc định)
• break-word: đoạn text nhảy xuống dòng nếu chữ quá dài, có thể gây hiện tượng đứt gãy từ.

Ví dụ: Xử lý đoạn text quá dài

p1 {
word-wrap: normal;
}

p2 {
  word-wrap: break-word;
}

Kết quả hiển thị :

Code đầy đủ:

Word Break

Word-wrap xác định có xuống dòng hay không, còn thuộc tính work-break xác định kiểu xuống dòng.

Các giá trị thường thấy là :

• normal: hiển thị theo mặc định, từ dài có thể bị tràn ra ngoài box (mặc định)
• keep-all: không sử dụng với các đoạn text tiếng Trung Quốc/Nhật Bản/Hàn Quốc (CJK), chức năng tương tự với normal. Khác biệt ở chỗ nếu từ có gạch nối sẽ được xuống dòng tại một vị trí thích hợp.
• break-all: khi hết đoạn thì một từ sẽ tự động ngắt ở bất kỳ ký tự nào để xuống dòng, có thể gây hiện tượng đứt gãy từ.
• break-word: khi hết đoạn thì sẽ tự động ngắt ở bất kỳ từ nào để xuống dòng.

Nếu là văn bản bình thường, ta sẽ dùng break-word nhiều hơn, còn break-all thường chỉ dùng cho số (nếu có).

Ví dụ: Thuộc tính work-break xác định kiểu xuống dòng

p.a {
  word-break: normal;
}

p.b {
  word-break: keep-all;
}

p.c {
  word-break: break-all;
}

p.d {
  word-break: break-word;
}

WebsiteQuảnTrịMạng là mạng xã hội về khoa học công nghệ tiên tiến .

WebsiteQuảnTrịMạng là mạng xã hội về khoa học công nghệ tiên tiến .

Writing Mode

Thuộc tính writing-mode sử dụng để định kiểu cho đoạn text được đặt theo chiều ngang hay chiều dọc.

Các giá trị của writing-mode :

• horizontal-tb: đoạn text sẽ được đặt theo chiều ngang từ trái sang phải, đọc từ trên xuống dưới (mặc định).
• vertical-rl: đoạn text được đặt theo chiều dọc từ phải sang trái, đọc từ trên xuống dưới.
• vertical-lr: đoạn text được đặt theo chiều dọc từ trái sang phải, đọc từ trên xuống dưới.

Ví dụ: Sử dụng writing-mode

p.test1 {
  writing-mode: horizontal-tb; 
}

p.test2 {
  writing-mode: vertical-rl; 
}

p.test3 {
  writing-mode: vertical-lr; 
}

Kết quả hiển thị :

Code đầy đủ:

Bài trước : Hiệu ứng Shadow trong CSS
Bài tiếp : Sử dụng Web Font trong CSS