Стварыць акно з пракруткай тэксту з дапамогай CSS і HTML
HTML акно пракруткі скрыню , які дадае паласы пракруткі справа і ўнізе , калі змесціва скрынкі больш , чым памеры скрынкі. Іншымі словамі, калі ў вас ёсць акно, якое можа змясціцца каля 50 слоў, і ў вас ёсць тэкст 200 слоў, світка акно HTML змесціць паласы пракруткі уверх, каб дазволіць вам убачыць дадатковыя 150 слоў. У стандартным HTML, які будзе проста націснуць дадатковы тэкст за межамі скрынкі.
Стварэнне HTML пракруткі даволі лёгка. Вам проста трэба ўсталяваць шырыню і вышыню элемента , які вы хочаце пракруткі , а затым выкарыстоўваць CSS пераліву ўласцівасць ўсталяваць , як вы хочаце , каб адбыцца скролінг.
Што рабіць з дадатковым тэкстам?
Калі ў вас ёсць больш тэксту, чым можа змясціцца ў прасторы на макеце, у вас ёсць некалькі варыянтаў:
- Перапішыце тэкст так, каб ён карацей і будзе адпавядаць.
- Дазволіць тэкст цячы за межы і спадзяюся, што размяшчэнне можа выгінацца, каб падтрымаць яго.
- Адрэзаны тэкст, дзе ён пераліваецца.
- Дадаць паласы пракруткі (звычайна вертыкальныя для тэксту), так што прастора скруткі, каб паказаць дадатковы тэкст.
Самы лепшы варыянт, як правіла, апошні варыянт: стварыць тэкставае поле прагорткі. Затым дадатковы тэкст па-ранейшаму можа быць прачытаны, але ваш праект не будзе парушаны.
HTML і CSS для гэтага было б:
Перапаўнення: аўто; паведамляе браўзэру, каб дадаць паласы пракруткі, калі яны неабходныя, каб захаваць тэкст ад перапоўненасці мяжы спраў. Але для таго, каб гэта працавала, неабходна таксама ўласцівасць шырыні і стылю вышыні, усталяванае на DIV, так што ёсць межы перапаўнення.
Вы таксама можаце адрэзаць тэкст шляхам змены перапаўнення: аўто; перапаўненне: схаваны;. Калі вы не задасце ўласцівасць перапаўнення, тэкст будзе перацякаць мяжы спраў.
Вы можаце дадаць паласы пракруткі больш, чым проста тэкст
Калі ў вас ёсць вялікае выява, якое вы хацелі б, каб адлюстраваць у меншым прасторы, вы можаце дадаць паласы пракруткі вакол яго такім жа спосабам, што і з тэкстам.
<Р стыль = "перапаўнення: аўто; шырыня: 300px; вышыня: 300px;">У гэтым прыкладзе, 400x509 малюнак у пункце ў 300х300.
Табліцы могуць атрымаць выгаду з паласы пракруткі
Доўгія сталы інфармацыі могуць атрымаць вельмі цяжка вельмі хутка чытаць, але калі размяшчалі іх усярэдзіне DIV абмежаванага памеру, а затым дадаць ўласцівасць перапаўнення, вы можаце ствараць табліцы з вялікай колькасцю дадзеных, якія не займаюць крайнія месца на старонцы ,
Самы просты спосаб, як і з выявамі і тэкстам, проста дадайце DIV вакол стала, ўсталяваць шырыню і вышыню гэтага DIV, і дадаць ўласцівасць перапаўнення:
| Джэніфер | 502-5366 .... Адна рэч, якая адбываецца, калі вы робіце гэта гарызантальная паласа пракруткі звычайна з'яўляецца, таму што браўзэр мяркуе, што хром палос пракруткі перакрывае табліцу. Ёсць шмат спосабаў, каб выправіць гэта з зменай шырыні табліцы і іншыя. Але мой любімы проста адключыць гарызантальную прагортку з дапамогай CSS 3 уласцівасцяў пераліву-х. Проста дадайце перапаўненне-х: схаваны; у DIV, і гэта будзе выдаліць гарызантальную паласу пракруткі. Абавязкова праверыць гэта, бо там можа быць змест, якое знікае. Firefox падтрымлівае выкарыстанне TBODY пазнакі для ПерапаўненнеАдна сапраўды добрая асаблівасць браўзэра Firefox з'яўляецца тое, што вы можаце выкарыстоўваць ўласцівасць перапаўнення на ўнутранай табліцы тэгаў як TBODY і THEAD або TFOOT. Гэта азначае, што вы можаце ўсталяваць палосы пракруткі на змесціва табліцы і вочкі загалоўка заставацца на якары над імі. Гэта працуе толькі ў Firefox , які занадта дрэнна, але гэта прыемная асаблівасць , калі вашы чытачы выкарыстоўваюць толькі Firefox. Перайдзіце да гэтага, напрыклад, у Firefox, каб убачыць, што я маю на ўвазе. <Табліца стыль = "шырыня: 300px;"> Джэніфер | 502-5366 ...
| |