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

Post a Comment

Mới hơn Cũ hơn