CSS TEXT EFFECTS

0
24

Ở phần này chúng ta sẽ học về các thuộc tính của CSS text effects- hiệu ứng văn bản. Ví dụ như:

  • text-overflow
  • word-wrap
  • word-break
  • writing-mode

CSS Text Overflow.

  • Thuộc tính text-overflow chỉ định cách báo hiệu nội dung tràn không được hiển thị cho người dùng.

Ví dụ: 

Đoạn văn bản có thể bị cắt bớt

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

Ví dụ:

Đoạn văn bản hiện thị dưới dạng dấu ba chấm.

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

Ví dụ sau đây cho thấy cách bạn có thể hiển thị nội dung bị tràn khi di chuột qua phần tử:

div.test {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden; 
  border: 1px solid #000000;
}
div.test:hover {
  overflow: visible;
}

CSS Word Wrapping.

  • Thuộc tính word-wrap cho phép các từ dài có thể được chia nhỏ và bọc vào dòng tiếp theo.
  • Ví dụ một từ quá dài để vừa với một khu vực, nó sẽ mở rộng ra bên ngoài:

Và khi sử dụng thuộc tính  word-wrap: 

Cú pháp:

p.test {
  width: 11em; 
  border: 1px solid #000000;
  word-wrap: break-word;
}

CSS WORD-BREAK.

  • Thuộc tính word-break quy định các quy tắc ngắt dòng.

Ví dụ:

p.test1 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: keep-all;
}

p.test2 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: break-all;
}

CSS Writing Mode.

  • Thuộc tính writing-mode chỉ định các dòng văn bản được bố trí theo chiều ngang hay chiều dọc.

Ví dụ:

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

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

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

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây