Hướng dẫn css word-wrap - gói từ css
Show Định nghĩa và sử dụngThuộc tính word-wrap sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout. Cấu trúctag {
word-wrap: giá trị;
}word-wrap có các giá trị như sau:
Ví dụMô tả
word-wrapp {
border: 1px solid #cc0000;
width: 150px;
}break-wordword-wrap: break-word; Những từ quá dài sẽ xuống hàng.p {
border: 1px solid #cc0000;
width: 150px;
word-wrap: break-word;
}normalword-wrap: break-word; - Ngắt các ký tự của từ xuống dòng khi từ đó bị tràn ra khỏi phần tử. - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính word-wrap có giá trị là normal) - Kế thừa giá trị thuộc tính word-wrap từ phần tử cha của nó.word-wrap để thiết lập việc tự ngắt xuống dòng giữa các ký tự của một từ (trong trường hợp từ đó quá dài so với chiều rộng của phần tử chứa nó) - Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính word-wrap có giá trị là normal) - Kế thừa giá trị thuộc tính word-wrap từ phần tử cha của 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) Thuộc tính word-wrap trong CSS- Thuộc tính word-wrap dùng để xác định việc có "ngắt các ký tự của một từ xuống dòng" trong trường hợp từ đó bị tràn ra khỏi phần tử hay không.word-wrap dùng để xác định việc có "ngắt các ký tự của một từ xuống dòng" trong trường hợp từ đó bị tràn ra khỏi phần tử hay không. - Mặc định, nếu một từ quá dài có kích thước vượt quá chiều rộng phần nội dung của phần tử thì từ đó sẽ bị tràn ra ngoài: Loạt tài liệu hướng dẫn học lập trình web của chúng tôi bao gồm HTMLCSSJavaScriptMySQLPHPjQuery được biên soạn kỹ lưỡng theo mức độ từ cơ bản đến nâng cao. - Tuy nhiên, với việc sử dụng thuộc tính word-wrap, ta có thể ngắt các ký tự của từ bị tràn ra ngoài xuống dòng.word-wrap, ta có thể ngắt các ký tự của từ bị tràn ra ngoài xuống dòng. Loạt tài liệu hướng dẫn học lập trình web của chúng tôi bao gồm HTMLCSSJavaScriptMySQLPHPjQuery được biên soạn kỹ lưỡng theo mức độ từ cơ bản đến nâng cao. - Tuy nhiên, với việc sử dụng thuộc tính word-wrap, ta có thể ngắt các ký tự của từ bị tràn ra ngoài xuống dòng.2) Cách sử dụng thuộc tính word-wrap trong CSSword-wrap, ta dùng cú pháp như sau: - Để sử dụng thuộc tính word-wrap, ta dùng cú pháp như sau:word-wrap có thể được xác định bởi một trong bốn loại:
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.net2.dantri.vn3.www.google.com4.www.freehost.page 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.net2.dantri.vn3.www.google.com4.www.freehost.page 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.net2.dantri.vn3.www.google.com4.www.freehost.page 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. |
