Създайте кутия с превъртащ се текст, като използвате CSS и HTML
HTML поле за превъртане е поле, което добавя ленти за превъртане в дясната и долната част, когато съдържанието на кутията е по-голямо от размерите на кутията. С други думи, ако имате кутия, която може да се побере около 50 думи и имате текст с 200 думи, полето за превъртане на HTML ще постави ленти за превъртане, за да ви позволи да видите още 150 думи. В стандартен HTML, който просто ще натисне допълнителния текст извън полето.
Извършването на HTML превъртане е сравнително лесно. Трябва само да зададете ширината и височината на елемента, който искате да превъртите, и след това да използвате свойството за препълване на CSS, за да зададете как искате да се извърши превъртането.
Какво да правите с допълнителен текст?
Когато имате повече текст, отколкото ще се побере в пространството на оформлението, имате няколко опции:
- Пренаписвайте текста така, че да е по-къс и да се побере.
- Оставете текста да преминава отвъд границите и се надявайте, че оформлението може да се огъне, за да го поддържате.
- Прекъснете текста, където преливат.
- Добавете ленти за превъртане (обикновено вертикални за текст), така че интервалът да се превърта, за да се покаже допълнителният текст.
Най-добрият вариант обикновено е последната опция: създаване на превъртащо се текстово поле. След това допълнителен текст все още може да се чете, но вашият дизайн не е компрометиран.
HTML и CSS за това би било:
Преливането: автоматично; казва на браузъра да добави ленти за превъртане, ако те са необходими, за да запазят текста от преливане на границите на div. Но за да може това да работи, вие също ви трябва свойствата на стил за ширина и височина, зададени на div, така че да има преливни граници.
Можете също така да отрежете текста, като промените преливането: автоматично; да преливат: скрити ;. Ако изключите собствеността на препълване, текстът ще се разпространи над границите на div.
Можете да добавите Scroll Bars за нещо повече от текст
Ако имате голямо изображение, което искате да се показва в по-малко пространство, можете да добавите ленти за превъртане около него по същия начин, както бихте го направили с текста.
В този пример изображението 400x509 се намира в параграф 300х300.
Таблиците могат да се възползват от лентите за превъртане
Дългите таблици на информацията могат да станат много трудни за четене много бързо, но чрез поставянето им в div на ограничен размер и след това добавяне на преливане собственост, можете да генерирате таблици с много данни, които не заемат извънредно пространство на вашата страница ,
Най-лесният начин е точно като с изображения и текст, просто добавете div около масата, задайте ширината и височината на div и добавете собствеността на преливане:
Едно нещо, което се случва, когато правите това, е хоризонталната лента за превъртане, която обикновено се появява, защото браузърът приема, че хромът на лентите за превъртане се припокрива с масата. Има много начини да се определи това от промяна на ширината на таблицата и други. Но любимото ми е просто да изключите хоризонталното превъртане с препълването на собствеността на CSS 3-x. Просто добавете препълване-x: скрито; до div и това ще премахне хоризонталната лента за превъртане. Не забравяйте да изпробвате това, тъй като може да има съдържание, което изчезва.
Firefox поддържа използването на маркерите TBODY за преливане
Една наистина приятна особеност на браузъра Firefox е, че можете да използвате свойството на препълване на вътрешните тагове на таблицата като tbody и thead или tfoot. Това означава, че можете да зададете ленти за превъртане върху съдържанието на таблицата и клетките на заглавката остават закотвени над тях. Това работи само в Firefox , което е твърде лошо, но е хубава функция, ако вашите читатели използват само Firefox. Прегледайте този пример в Firefox, за да видите какво имам предвид.