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三点 (...):

Đâ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ử ngay

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

Mô hình

div.test:hover {
  overflow: visible;
{}

Thử ngay

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 cắt và chuyển 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à chia từ giữa:

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 cắt và chuyển sang dòng tiếp theo:

p {
  word-wrap: break-word;
{}

Thử ngay

Quy tắc换 dòng CSS

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

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

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

Mục này chứa một số văn bản. Các dòng sẽ bị chia cắt ở 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ử ngay

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.

Some text with a span element with a 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ử ngay

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

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

Thuộc tính Mô tả
text-align-last Định nghĩa cách canh dòng cuối cùng của văn bản.
text-justify Định nghĩa cách đối齡 và cách cách nhau của văn bản được canh.
text-overflow Định nghĩa cách hiển thị nội dung tràn không được hiển thị.
word-break Định nghĩa quy tắc换行 cho các ký tự脚本 không phải CJK.
word-wrap Cho phép từ dài bị chia thành các phần và chuyển sang dòng mới.
writing-mode Định nghĩa dòng văn bản là đặt ngang hay dọc.