Văn bản với CSS3

Văn bản với CSS3

CSS3 chứa một số tính năng mới về văn bản.

Trong chương này, các bạn sẽ tìm hiểu về các thuộc tính văn bản sau đây:

·      text-overflow

·      word-wrap

·      word-break

Các trình duyệt hỗ trợ

Những con số trong bảng cho thấy các phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Các số theo sau là - o- cho thấy các phiên bản đầu tiên làm việc với thuộc tính này kèm theo một tiền tố.

Thuộc tính về tràn văn bản CSS3

CSS3 có thuộc tính text-overflow dùng để chỉ định cách mà nội dung sẽ tràn cái mà không được hiển thị cần được báo hiệu cho người dùng.

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

hoặc có thể được đánh dấu bằng dấu 3 chấm (...):

Mã CSS như sau:

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;

}

Try it yourself »

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

div.test:hover {

text-overflow: inherit;

overflow: visible;

}

Try it yourself »

Bẻ dòng các từ với CSS3

Thuộc tính CSS3 word-wrap cho phép các từ dài có thể bị bẻ sang dòng tiếp theo.

Nếu một từ quá dài để so với vùng chứa nó, nó sẽ tràn ra bên ngoài:

Thuộc tính word-wrap cho phép bạn buộc các văn bản bị bẻ - ngay cả khi nó phân tách giữa của một từ:

Mã CSS như sau:

Cho phép các từ dài có thể bị bẻ sang dòng kế tiếp:

p  {

word-wrap: break-word;

}

Try it yourself »

Bẻ từ trong CSS3

Thuộc tính word-break trong SS3 chỉ định dòng tuân theo quy tắc bẻ từ.

The CSS code is as follows:

p.test1 {

word-break: keep-all;

}

p.test2 {

word-break: break-all;

}

Try it yourself »

Tự làm bài tập!

Exercise 1 » Exercise 2 » Exercise 3 »

Các thuộc tính về văn bản trong CSS3

Bảng sau liệt kê các thuộc tính mới về văn bản trong CSS3:

Thuộc tính	Mô tả
text-align-last	Chỉ định cách căn chỉnh văn bản ở dòng cuối.
text-emphasis	Thuộc tính rút gọn để thiết lập text-emphasis-style và text-emphasis-color trong cùng một mô tả
text-justify	Chỉ định cách điều chỉnh văn bản.
text-overflow	Chỉ định cách trình bày nội dung khi nó tràn ra khỏi khu vực cho phép
word-break	Chỉ định quy tắc bẻ từ dành cho kịch bản none-CJK (CJK = Chinese, Japanese, Korean)
Word-wrap	Cho phép những từ dài có thể bị bẻ gãy và chuyển sang dòng tiếp.

CodeLean.vn

Nguồn w3schools.org