[Exactly] Một số thuộc tính xử lý Text trong CSS | xuống dòng trong html – Verified – https://final-blade.com

xuống dòng trong html : You are currently viewing the topic .Bài viết này Quantrimang. com sẽ cùng bạn khám phá cách giải quyết và xử lý đoạn text quá dài gây thực trạng tràn ra ngoài thành phần chứa nó bằng cách sử dụng những thuộc tính :

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

Text Overflow

Thuộc tính text-overflow dùng để xử lý một đoạn text bị tràn ra ngoài phần tử chứa nó bằng cách cắt bớt đoạn tràn hoặc hiển thị dưới dạng dấu chấm lửng “…” để làm dấu hiệu cho người dùng.

Hai giá trị thường dùng nhất là:

  • clip: cắt bớt đoạn text bị tràn ra ngoài (mặc định).
  • ellipsis: thêm ba dấu chấm (…) nếu text bị tràn ra ngoài.

Hai thuộc tính đi kèm text-overflow là :

  • white-space: nowrap;
  • overflow: hidden;

Ví dụ 1: Xử lý text tràn ra ngoài.

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;
}

Kết quả hiển thị :

Code đầy đủ:







Thuộc tính text-overflow


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

text-overflow: clip:


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

text-overflow: ellipsis:


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 .

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




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


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 đủ:







Thuộc tính word-wrap

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


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



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;
}






Thuộc tính word-break

word-break: normal (mặc định):


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

word-break: keep-all:


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

word-break: break-all:


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

word-break: break-all:


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 đủ:








The writing-mode Property

writing-mode: horizontal-tb;


Bạn có thể trở thành một phần của Quantrimang.com bằng cách
gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung
của mạng xã hội thông qua địa chỉ email [ email protected ] hoặc đăng ký tài khoản
và đăng bài trực tiếp trên Quantrimang.com.

writing-mode: vertical-rl;


Bạn có thể trở thành một phần của Quantrimang.com bằng cách
gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung
của mạng xã hội thông qua địa chỉ email [ email protected ] hoặc đăng ký tài khoản
và đăng bài trực tiếp trên Quantrimang.com.

writing-mode: vertical-lr;


Bạn có thể trở thành một phần của Quantrimang.com bằng cách
gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung
của mạng xã hội thông qua địa chỉ email

[email protected]

hoặc đăng ký tài khoản
và đăng bài trực tiếp trên Quantrimang.com.




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