Создајте кутија со лизгање текст користејќи CSS и HTML
Лента за лизгање HTML е кутија која додава лизгачки лизгања на десната и на дното кога содржината на кутијата е поголема од димензиите на кутијата. Со други зборови, ако имате кутија која може да се вклопи околу 50 зборови, а имате текст од 200 зборови, поле за лизгање HTML ќе ги ставите лентите за лизгање за да ги видите дополнителни 150 зборови. Во стандарден HTML кој едноставно ќе го притисне дополнителниот текст надвор од кутијата.
Изведувањето на HTML лизгањето е прилично лесно. Вие само треба да ја поставите ширината и висината на елементот што сакате да го скролувате, а потоа да го користите CSS сопствениот имот за да го поставите начинот на кој сакате да се изврши лизгањето.
Што да правиш со екстра текст?
Кога имате повеќе текст отколку што ќе се вклопат во просторот на вашиот изглед, имате неколку опции:
- Напишете го текстот така што ќе биде пократок и ќе одговара.
- Дозволете текстот да тече подалеку од границите и се надеваме дека изгледот може да флекс да го поддржи.
- Исечете го текстот каде што се прелева.
- Додајте ленти за лизгање (обично вертикално за текст), така што просторот свитоци да го покажат дополнителниот текст.
Најдобрата опција е обично последната опција: креирајте текстуално поле за лизгање. Потоа, дополнителниот текст сеуште може да се прочита, но вашиот дизајн не е компромитиран.
HTML и CSS за ова би биле:
Прелевање: авто; му кажува на прелистувачот да додаде ленти за лизгање ако се потребни за да го задржат текстот од преплавување на границите на div. Но, за да може ова да функционира, ви требаат и својствата на стил на ширина и висина, поставени на div, така што има препреки да постојат граници.
Можете исто така да го отсечете текстот со промена на претекување: автоматски; да претекување: скриено ;. Ако го оставите надвор имотот за претекување, текстот ќе се прелее преку границите на div.
Можете да додадете ленти за лизгање на повеќе од само текст
Ако имате голема слика која сакате да ја прикажете во помал простор, можете да додадете ленти за скролување околу неа на ист начин како би со текстот.
Во овој пример, сликата 400x509 е внатре во ставот од 300x300.
Табелите може да имаат корист од лентите за лизгање
Долгите табели на информации може да се многу тешко да се прочитаат многу брзо, но со ставање во внатрешноста на дивина со ограничена големина и потоа додавање на својството на претекување, можете да генерирате табели со многу податоци кои не заземаат екстремен простор на вашата страница .
Најлесен начин е само како со слики и текст, само додадете раздел околу табелата, поставете ја ширината и висината на тој div и додадете го имотот за претекување:
Едно нешто што се случува кога ќе го направите ова е хоризонтална лента за лизгање обично се појавува бидејќи прелистувачот претпоставува дека хромот на лизгачите се преклопува со табелата. Постојат многу начини да се поправи ова од промена на ширината на масата и други. Но, мојот омилен е едноставно да го исклучите хоризонталното лизгање со претекување-x на имотот CSS 3. Само додадете overflow-x: hidden; на div, а тоа ќе ја отстрани хоризонталната лента за лизгање. Бидете сигурни да го тестирате ова, бидејќи може да има содржина што исчезнува.
Firefox поддржува користење на ознаките TBODY за прелевање
Една навистина убава карактеристика на прелистувачот на Firefox е тоа што можете да го користите својството на претекување на внатрешните ознаки на табелата како tbody и thead или tfoot. Ова значи дека можете да поставите ленти за лизгање на содржината на табелата, а клетките на заглавието остануваат закотвени над нив. Ова работи само во Firefox , што е премногу лошо, но тоа е убава карактеристика ако вашите читатели користат Firefox само. Прегледајте го овој пример во Firefox за да видите што мислам.
| Име | Телефон |
|---|---|
| Jennifer | 502-5366 ...
|