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;
}
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;
}
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;
}
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;
}
Tự
làm bài tập!
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ả
|
Chỉ định cách căn chỉnh văn
bản ở dòng cuối.
|
|
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ả
|
|
Chỉ định cách điều chỉnh
văn bản.
|
|
Chỉ định cách trình bày nội
dung khi nó tràn ra khỏi khu vực cho phép
|
|
Chỉ định quy tắc bẻ từ dành
cho kịch bản none-CJK (CJK = Chinese, Japanese, Korean)
|
|
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
إرسال تعليق