Pole przewijania HTML
Utwórz pudełko z przewijanym tekstem za pomocą CSS i HTML
jakiś HTML scroll box to pole, które dodaje paski przewijania po prawej stronie iu dołu, gdy zawartość pola jest większa niż wymiary pola. Innymi słowy, jeśli masz pole, które może pomieścić około 50 słów, a tekst ma 200 słów, pole przewijania HTML umieści paski przewijania, aby zobaczyć dodatkowe 150 słów. W standardowym HTML, który po prostu wypchnąłby dodatkowy tekst poza pole.
Przewijanie HTML jest dość łatwe. Wystarczy ustawić szerokość i wzrost elementu, który chcesz przewinąć, a następnie użyj CSS overflow, aby ustawić sposób przewijania.
Hamza Tarkkol/Getty Images
Co zrobić z dodatkowym tekstem?
Jeśli masz więcej tekstu, niż zmieści się w układzie, masz kilka opcji:
- Przepisz tekst, aby był krótszy i pasował.
- Pozwól, aby tekst wypłynął poza granice i miej nadzieję, że układ może się dostosować, aby go wspierać.
- Odetnij tekst tam, gdzie się przelewa.
- Dodaj paski przewijania (zwykle pionowe w przypadku tekstu), aby przestrzeń przewijała się, aby pokazać dodatkowy tekst.
Najlepszą opcją jest zazwyczaj ostatnia opcja: utworzenie przewijanego pola tekstowego. Wtedy dodatkowy tekst nadal będzie można odczytać, ale projekt nie zostanie naruszony.
HTML i CSS to:
|_+_| |_+_| |_+_|The przelew: auto; mówi przeglądarce, aby dodała paski przewijania, jeśli są potrzebne, aby tekst nie przekroczył granic div. Ale aby to zadziałało, potrzebujesz również właściwości stylu width i height ustawionego w div, aby istniały granice do przepełnienia.
Możesz także wyciąć tekst, zmieniając przepełnienie: auto; do przelew: ukryty; Jeśli pominiesz właściwość overflow, tekst rozleje się poza granice div.
Możesz dodać paski przewijania do więcej niż tylko tekstu
Jeśli masz duży obraz, który chcesz wyświetlić na mniejszej przestrzeni, możesz dodać wokół niego paski przewijania w taki sam sposób, jak w przypadku tekstu.
|_+_| |_+_|
W tym przykładzie obraz o wymiarach 400x509 znajduje się wewnątrz akapitu o wymiarach 300x300.
Tabele mogą korzystać z pasków przewijania
Długie tabele informacji mogą być bardzo trudne do odczytania bardzo szybko, ale umieszczając je w bloku div o ograniczonym rozmiarze, a następnie dodając właściwość overflow, możesz wygenerować tabele z dużą ilością danych, które nie zajmują dużo miejsca na stronie.
Najprostszy sposób jest taki sam jak w przypadku obrazów i tekstu, po prostu dodaj div wokół stołu, ustaw szerokość i wysokość tego div i dodaj właściwość overflow:
|_+_| |_+_|Jedna rzecz, która się dzieje, gdy to robisz, to zwykle pojawia się poziomy pasek przewijania, ponieważ przeglądarka zakłada, że chrom pasków przewijania nakłada się na tabelę. Istnieje wiele sposobów, aby to naprawić, zmieniając szerokość stołu i inne. Ale naszym ulubionym jest po prostu wyłączenie przewijania w poziomie za pomocą właściwości CSS 3 przepełnienie-x
Poprostu dodaj przepełnienie-x: ukryte; do div, a to usunie poziomy pasek przewijania. Pamiętaj, aby to przetestować, ponieważ może istnieć zawartość, która zniknie.
|_+_|Firefox obsługuje używanie tagów TBODY do przepełnienia
Jedną z naprawdę fajnych funkcji przeglądarki Firefox jest to, że możesz użyć właściwości overflow na wewnętrznych tagach tabeli, takich jak tbody i thead lub tfoot. Oznacza to, że możesz ustawić paski przewijania na zawartości tabeli, a komórki nagłówka pozostaną zakotwiczone nad nimi. Działa to tylko w Firefoksie, co jest bardzo złe, ale jest to przyjemna funkcja, jeśli Twoi czytelnicy używają tylko Firefoksa. Przejdź do tego przykładu w Firefoksie, aby zobaczyć, co mam na myśli.
|_+_| |_+_||_+_|