Hiệu ứng văn bản CSS
Tràn văn bản CSS, ngắt dòng, 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-overflow
-
word-wrap
-
word-break
-
writing-mode
Tràn văn bản CSS
Thuộc tính text-overflow
CSS chỉ đị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:
Ví 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;
}
Hãy tự mình thử »Ví dụ sau đây 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ử:
Gói từ CSS
Thuộc tính CSS word-wrap
cho phép các từ dài có thể được ngắt và ngắt dòng sang dòng tiếp theo.
Nếu một từ quá dài không vừa trong một khu vực, nó sẽ mở rộng ra bên ngoài:
Đoạn này có một từ rất dài: thisisveryveryveryveryverylongword. Từ dài sẽ ngắt và ngắt 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 ngắt dòng - ngay cả khi điều đó có nghĩa là tách nó ra ở giữa một từ:
Đoạn này có một từ rất dài: thisisveryveryveryveryverylongword. Từ dài sẽ ngắt và ngắt sang dòng tiếp theo.
Mã CSS như sau:
Ví dụ
Cho phép ngắt các từ dài và ngắt thành dòng tiếp theo:
p {
word-wrap: break-word;
}
Hãy tự mình thử »Phá vỡ từ CSS
Thuộc tính word-break
trong CSS chỉ định các quy tắc ngắt dòng.
Đoạn này có chứa một số văn bản. Dòng này sẽ ngắt ở dấu gạch nối.
Đoạn này có 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:
Chế độ viết CSS
Thuộc writing-mode
CSS chỉ định xem các dòng văn bản được đặt theo chiều ngang hay chiều dọc.
Một số văn bản có phần tử span có chế độ viết theo chiều dọc .
Ví dụ sau đây cho thấy một số chế độ viết khác nhau:
Ví dụ
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Hãy tự mình thử » 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 |