Hướng dẫn ngắt dòng css
Ví dụHTML viết:
CSS viết:p {
border: 1px solid #cc0000;
width: 150px;
}Hiển thị trình duyệt khi chưa có word-wrap:HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN Thêm thuộc tính word-wrap vào CSS:p {
border: 1px solid #cc0000;
width: 150px;
word-wrap: break-word;
}Hiển thị trình duyệt khi có word-wrap:HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN Thuộc tính word-wrap dùng để ngắt những từ quá dài, mà nếu bạn không dùng đến nó sẽ gây ra tình trạng phá vỡ layout (bố cục) của trang. Cách đơn giản nhất để hiểu thuộc tính này là thông qua ví dụ, chẳng hạn tôi có một danh sách các tên miền ưa thích như sau: 1.vnexpress.net Bạn dễ dàng thấy tên miền www.freehost.page bị tràn ra khỏi layout, sở dĩ như vậy vì nó dài hơn chiều rộng của box chứa nó. Để khắc phục tình trạng này ta dùng word-wrap với giá trị là break-word, code mẫu: Kết quả: 1.vnexpress.net Như bạn đã thấy, một từ dài đã không còn tràn ra ngoài nữa mà bị ngắt rồi xuống dòng kế tiếp (bình thường thì không thể ngắt được, vì nó thuộc về cùng một từ) Ngoài giá trị break-word, còn có giá trị khác là normal. Giá trị normal là dạng mặc định, tức là từ quá dài sẽ tràn ra khỏi layout. Cú pháp tổng quát: Dĩ nhiên là bạn chỉ được chọn một trong 2 giá trị thôi nhá, hoặc là normal, hoặc là break-word. Câu hỏi: liệu còn cách nào để tránh tràn trong diện tích hẹp như vậy không? Câu trả lời là có. Bạn có thể dùng thuộc tính overflow. Chẳng hạn tôi có thể sửa hộp trên như sau: 1.vnexpress.net Tuy nhiên như bạn đã biết (hoặc bây giờ sẽ biết) đối với người dùng thì thanh cuộn dọc hoàn toàn OK nhưng họ không ưa thanh cuộn ngang cho lắm. Vì vậy word-wrap vẫn hữu ích hơn trong trường hợp này. Bài viết này Quantrimang.com sẽ cùng bạn tìm hiểu cách xử lý đoạn text quá dài gây tình trạng tràn ra ngoài phần tử chứa nó bằng cách sử dụng các thuộc tính:
Text OverflowThuộc tính text-overflow dùng để xử lý một đoạn text bị tràn ra ngoài phần tử chứa nó bằng cách cắt bớt đoạn tràn hoặc hiển thị dưới dạng dấu chấm lửng "..." để làm dấu hiệu cho người dùng. Hai giá trị thường dùng nhất là:
Hai thuộc tính đi kèm text-overflow là:
Ví dụ 1: Xử lý text tràn ra ngoài.
Kết quả hiển thị: Code đầy đủ:
Ví dụ 2: Hiển thị nội dung bị tràn khi di chuột qua phần tử:
Word WrapThuộc tính word-wrap cho phép đoạn text xuống dòng nếu quá dài, có thể gây hiện tượng đứt gãy một từ. Hai giá trị tiêu biểu nhất là:
Ví dụ: Xử lý đoạn text quá dài
Kết quả hiển thị: Code đầy đủ:
Word BreakWord-wrap xác định có xuống dòng hay không, còn thuộc tính work-break xác định kiểu xuống dòng. Các giá trị thường thấy là:
Nếu là văn bản bình thường, ta sẽ dùng break-word nhiều hơn, còn break-all thường chỉ dùng cho số (nếu có). Ví dụ: Thuộc tính work-break xác định kiểu xuống dòng
Writing ModeThuộc tính writing-mode sử dụng để định kiểu cho đoạn text được đặt theo chiều ngang hay chiều dọc. Các giá trị của writing-mode:
Ví dụ: Sử dụng writing-mode
Kết quả hiển thị: Code đầy đủ:
Bài trước: Hiệu ứng Shadow trong CSS Bài tiếp: Sử dụng Web Font trong CSS
Thứ Ba, 07/05/2019 11:40 4,2 ★ 10 👨 66.274 #CSS 0 Bình luận Sắp xếp theo Xóa Đăng nhập để Gửi Bạn nên đọc
CSS và CSS3
CSS và CSS3
Giới thiệu | Điều khoản | Bảo mật | Hướng dẫn | Ứng dụng | Liên hệ | Quảng cáo | Facebook | Youtube | DMCA Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản: CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. Địa chỉ: 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại: 024 2242 6188. Email: [email protected]. Chịu trách nhiệm nội dung: Lê Ngọc Lam. Bản quyền © 2003-2023 QuanTriMang.com. Giữ toàn quyền. Không được sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc QuanTriMang.com khi chưa được phép. |
