Hiệu ứng văn bản CSS

CSS Chuyển văn bản dư, Đổi hàng nguyên字, Quy tắc đổi hàng và Quy định viết

Trong chương này, bạn sẽ học các thuộc tính sau:

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

CSS Chuyển văn bản dư

CSS text-overflow Thuộc tính quy định cách hiển thị nội dung dư không hiển thị cho người dùng.

Có thể bị cắt bỏ:

Đây là một đoạn văn bản dài không thể chứa trong khung. Đây là một đoạn văn bản dài không thể chứa trong khung

Cũng có thể hiển thị bằng dấu chấm phẩy (…):

Đây là một đoạn văn bản dài không thể chứa trong khung. Đây là một đoạn văn bản dài không thể chứa trong khung

Mã CSS sau đây:

Mô hình

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

Thử trực tiếp

Dưới đây là ví dụ về cách hiển thị nội dung dư khi đặt chuột trên yếu tố:

Mô hình

div.test:hover {
  overflow: visible;
}

Thử trực tiếp

CSS Chuyển dòng từ (Word Wrapping)

CSS word-wrap Thuộc tính cho phép văn bản dài bị chia và chuyển dòng sang dòng tiếp theo.

Nếu một từ quá dài mà không thể chứa trong một khu vực, nó sẽ mở rộng ra ngoài:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Bằng cách sử dụng thuộc tính word-wrap, bạn có thể buộc văn bản được chuyển dòng - ngay cả khi điều này có nghĩa là nó sẽ bị chia ở giữa từ:

This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.

Mã CSS sau đây:

Mô hình

Cho phép từ dài bị chia và chuyển dòng sang dòng tiếp theo:

p {
  word-wrap: break-word;
}

Thử trực tiếp

Quy tắc chuyển dòng CSS

CSS word-break Thuộc tính xác định quy tắc chuyển dòng.

Mục đoạn này chứa một số văn bản. Dòng này sẽ bị chia bằng dấu gạch nối:

This paragraph contains some text. This line will-break-at-hyphens.

Mục đoạn này chứa một số văn bản. Các dòng sẽ bị chia tại bất kỳ ký tự nào:

This paragraph contains some text. The lines will break at any character.

Mã CSS sau đây:

Mô hình

p.test1 {
  word-break: keep-all;
}
p.test2 {
  word-break: break-all;
}

Thử trực tiếp

Mô hình viết CSS

CSS writing-mode Thuộc tính quy định dòng văn bản là đặt ngang hay dọc.

Một đoạn văn với một phần tử span có vertical-rl writing-mode.

Dưới đây là một số ví dụ về các mô hình viết khác nhau:

Mô hình

p.test1 {
  writing-mode: horizontal-tb; 
}
span.test2 {
  writing-mode: vertical-rl; 
}
p.test2 {
  writing-mode: vertical-rl; 
}

Thử trực tiếp

Thuộc tính hiệu ứng văn bản CSS

Dưới đây là bảng liệt kê các thuộc tính hiệu ứng văn bản CSS:

属性 Mô tả
text-align-last Chỉ định cách canh dòng văn bản cuối cùng.
text-justify Chỉ định cách đối齐 và cách cách của văn bản được canh.
text-overflow Chỉ định cách hiển thị nội dung tràn ra ngoài.
word-break Chỉ định quy tắc phân dòng cho các ký tự脚本 không phải CJK.
word-wrap Cho phép từ dài bị gián đoạn và chuyển sang dòng tiếp theo.
writing-mode Chỉ định dòng văn bản là đặt ngang hay dọc.