Hiệu ứng văn bản CSS
Tràn văn bản CSS , Word Wrap, Quy tắc ngắt dòng và Chế độ viết
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính sau:
text-overflowword-wrapword-breakwriting-mode
Phần tràn văn bản CSS
Thuộc tính CSS text-overflowchỉ định cách báo hiệu nội dung bị tràn không được hiển thị cho người dùng.
Nó có thể được cắt bớt:
Đây là một số văn bản dài sẽ không vừa với hộp
hoặc nó có thể được hiển thị dưới dạng dấu chấm lửng (...):
Đây là một số văn bản dài sẽ không vừa với hộp
Mã CSS như sau:
Thí dụ
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 bạn có thể hiển thị nội dung bị tràn khi di chuột qua phần tử:
Thí dụ
div.test:hover {
overflow: visible;
}
Gói CSS Word
Thuộc tính CSS word-wrapcho phép các từ dài có thể được ngắt và quấn vào dòng tiếp theo.
Nếu một từ quá dài để vừa với một khu vực, nó sẽ mở rộng ra bên ngoài:
Đoạn văn này có một từ rất dài: thisisaveryveryveryveryveryverylongword. Từ dài sẽ bị vỡ và quấn sang dòng tiếp theo.
Thuộc tính word-wrap cho phép bạn buộc văn bản phải quấn - ngay cả khi nó có nghĩa là tách nó ra ở giữa một từ:
Đoạn văn này có một từ rất dài: thisisaveryveryveryveryveryverylongword. Từ dài sẽ bị vỡ và quấn sang dòng tiếp theo.
Mã CSS như sau:
Thí dụ
Cho phép các từ dài có thể bị ngắt quãng và chuyển sang dòng tiếp theo:
p {
word-wrap: break-word;
}
CSS Word Break
Thuộc tính CSS word-breakchỉ định các quy tắc ngắt dòng.
Đoạn văn này chứa một số văn bản. Dòng này sẽ-ngắt ở-dấu gạch nối.
Đoạn văn này chứa một số văn bản. Các dòng sẽ ngắt ở bất kỳ ký tự nào.
Mã CSS như sau:
Thí dụ
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Chế độ viết CSS
Thuộc tính CSS writing-modechỉ định các dòng văn bản được bố trí theo chiều ngang hay chiều dọc.
Một số văn bản có phần tử span với dấu dọc-rl chế độ viết.
Ví dụ sau cho thấy một số chế độ ghi khác nhau:
Thí dụ
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Thuộc tính hiệu ứng văn bản CSS
Bảng sau liệt kê các thuộc tính hiệu ứng văn bản CSS:
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |