Utwórz ramkę z przewijanym tekstem za pomocą CSS i HTML

Na HTML scroll box to pole, które dodaje paski przewijania po prawej stronie i na dole, 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 wysokość elementu, który chcesz przewinąć, a następnie użyj CSS overflow, aby ustawić sposób przewijania.

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:

tekst tutaj... 

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, tak aby istniały granice do przepełnienia.

Możesz również 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 div o ograniczonym rozmiarze a następnie dodając właściwość overflow, możesz generować tabele z dużą ilością danych, które nie zajmują dużo miejsca na twoim strona.

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 zrobisz, 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ż mogą istnieć treści, które znikają.

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.

...ImięTelefonJennifer502-5366. 

...