Tạo một hộp với văn bản cuộn bằng cách sử dụng CSS và HTML
Hộp cuộn HTML là một hộp cho biết thêm thanh cuộn ở bên phải và dưới cùng khi nội dung của hộp lớn hơn kích thước hộp. Nói cách khác, nếu bạn có một hộp có thể chứa khoảng 50 từ, và bạn có văn bản 200 từ, một hộp cuộn HTML sẽ đặt thanh cuộn lên để cho bạn thấy 150 từ bổ sung. Trong HTML chuẩn, chỉ cần đẩy văn bản thừa bên ngoài hộp.
Tạo cuộn HTML khá dễ dàng. Bạn chỉ cần đặt chiều rộng và chiều cao của phần tử bạn muốn cuộn và sau đó sử dụng thuộc tính tràn CSS để đặt cách bạn muốn cuộn xuất hiện.
Làm gì với văn bản bổ sung?
Khi bạn có nhiều văn bản hơn sẽ phù hợp với không gian trên bố cục của mình, bạn có một vài tùy chọn:
- Viết lại văn bản để nó ngắn hơn và phù hợp.
- Cho phép văn bản chảy ra ngoài giới hạn và hy vọng bố cục có thể uốn cong để hỗ trợ nó.
- Cắt bỏ văn bản nơi nó tràn.
- Thêm thanh cuộn (thường là dọc cho văn bản) để không gian cuộn để hiển thị văn bản bổ sung.
Tùy chọn tốt nhất thường là tùy chọn cuối cùng: tạo hộp văn bản cuộn. Sau đó, văn bản bổ sung vẫn có thể được đọc, nhưng thiết kế của bạn không bị xâm phạm.
HTML và CSS cho điều này sẽ là:
Tràn: tự động; yêu cầu trình duyệt thêm thanh cuộn nếu cần để giữ văn bản không bị tràn ranh giới của div. Nhưng để làm việc này, bạn cũng cần các thuộc tính kiểu chiều rộng và chiều cao được đặt trên div, để có các ranh giới tràn.
Bạn cũng có thể cắt bỏ văn bản bằng cách thay đổi tràn: tự động; tràn: ẩn ;. Nếu bạn bỏ qua thuộc tính tràn, văn bản sẽ tràn qua ranh giới của div.
Bạn có thể thêm thanh cuộn vào nhiều hơn là chỉ văn bản
Nếu bạn có một hình ảnh lớn mà bạn muốn hiển thị trong một không gian nhỏ hơn, bạn có thể thêm các thanh cuộn xung quanh nó giống như cách bạn làm với văn bản.
Trong ví dụ này, hình ảnh 400x509 nằm trong đoạn 300x300.
Bảng có thể hưởng lợi từ thanh cuộn
Các bảng thông tin dài có thể rất khó đọc, nhưng bằng cách đặt chúng bên trong một div có kích thước giới hạn và sau đó thêm thuộc tính tràn, bạn có thể tạo các bảng với nhiều dữ liệu không chiếm nhiều không gian trên trang của bạn .
Cách dễ nhất cũng giống như với hình ảnh và văn bản, chỉ cần thêm một div xung quanh bảng, đặt chiều rộng và chiều cao của div đó và thêm thuộc tính tràn:
| Tên | Điện thoại | ||||
|---|---|---|---|---|---|
| Jennifer | 502-5366 .... Một điều xảy ra khi bạn thực hiện điều này là thanh cuộn ngang thường xuất hiện vì trình duyệt giả định rằng chrome của các thanh cuộn chồng chéo bảng. Có nhiều cách để khắc phục điều này từ việc thay đổi độ rộng của bảng và các cách khác. Nhưng yêu thích của tôi là chỉ cần tắt cuộn ngang với thuộc tính CSS 3 tràn-x. Chỉ cần thêm overflow-x: hidden; đến div và điều đó sẽ xóa thanh cuộn ngang. Hãy chắc chắn để kiểm tra điều này, vì có thể có nội dung biến mất. Hỗ trợ Firefox Sử dụng các thẻ TBODY cho trànMột tính năng thực sự hay của trình duyệt Firefox là bạn có thể sử dụng thuộc tính tràn trên các thẻ bảng bên trong như tbody và thead hoặc tfoot. Điều này có nghĩa là bạn có thể thiết lập các thanh cuộn trên các nội dung của bảng và các ô tiêu đề vẫn được neo ở trên chúng. Điều này chỉ hoạt động trong Firefox , điều này quá tệ, nhưng nó là một tính năng tuyệt vời nếu người đọc của bạn chỉ sử dụng Firefox. Duyệt đến ví dụ này trong Firefox để xem ý tôi là gì.
|