Како променити подразумевано преламање текста помоћу ХТМЛ-а и ЦСС-а
За разлику од папира, веб странице могу скоро бесконачно се протеже бочно. Колико год да је импресивна, то није нешто што нам је заиста потребно док читамо. Прегледачи преламају текст у зависности од ширина контејнера за текст анд тхе ширина екрана тако да можемо да видимо цео текст, а да не морамо да се померамо бочно (само доле).
Враппинг је нешто што прегледачи раде с обзиром на многе факторе, као што су језик текста или постављање интерпункција и размака - они не гурај само доле оно што се не уклапа у оквир дефинисан за текстуални садржај.
Осим умотавања, користе се и претраживачи водите рачуна о просторима; они спајају више узастопних размака у изворном коду у један простор на рендерованој страници, а такође региструју присилне паузе пре почетка рада на омоту.
Када да промените подразумевани прелом текста
То је сјајно и веома цењено. Али, лако можемо завршити у околностима када подразумевано понашање претраживача није оно што тражимо. То може бити наслов не би требало да се омота или реч у параграфу боље се разбити него се спустити низ, остављајући празан празан простор на крају линије.
Може се десити и да смо само очајнички требамо те просторе сачуване у нашем тексту, међутим, претраживач их комбинује у један, присиљавајући нас да додамо више у изворном коду.
Могуће су и поставке за оматање променити језик и сврху текста. Мандарински новински чланак и француска пјесма не морају нужно бити замотани на исти начин.
Постоји доста ЦСС својстава (и ХТМЛ елемената!) Која могу контролишите омотавање и тачке прекида и такође дефинишите како се простори и преломи линија обрађују пре оматања.
Могућности меког омотавања и прекида меког омотавања
Претраживачи одлучују где да преламају препун текст зависно од граница речи, цртица, слогова, интерпункција, размака и још много тога. Ова места се зову могућности за меко оматање и када претраживач разбије текст на једном таквом месту, пауза се назива а мекани омот.
Најједноставнији начин приморати на додатну паузу може се урадити коришћењем доброг старог
Вхитеспаце
Ако сте упознати са вхите-спаце ЦСС својство Кладим се да сте га први пут упознали на исти начин као и многи други; док трагате за начином спречавање оматања текста. Тхе новрап Вредност вхите-спаце ради управо то.
Међутим вхите-спаце власништво је више него само оматање. Пре свега, шта је празан простор? То је сет знакова за размак. Сваки простор у сету разликују се једни од других у дужини, у правцу или обоје.
А типицал један хоризонтални просторни карактер је оно што додајемо притиском на размакницу. Тастер Таб такође додаје а сличан простор, али са већом дужином. Ентер тастер додаје а вертикални простор да бисте започели нову линију, и у ХТМЛ додаје а један непробојни простор на веб странице. Овако, постоји много типова простора који чине “вхитеспаце”.
Као што сам споменуо на почетку, претраживачи колапс више размака (и хоризонтална и вертикална) у извору у један простор. Они такође размотрите те знакове простора за могућности оматања (места где се текст може замотати) када је потребно оматање.
Управо ове акције прегледника можемо контролирати вхите-спаце. Приметите да је вхите-спаце власништво не утиче на све врсте простора, само најчешће као што су обичан хоризонтални простор, табулатори и линкови.
У наставку можете видети снимак узорка текста који је омотан прегледачем да стане у његов контејнер. Преливање се дешава на дну контејнера, а преливени текст је различито обојен. Приметићете колапс узастопних простора у коду.
А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво.
.тектЦонтаинер видтх: 500пк; хеигхт: 320пк;
Након пријављивања вхите-спаце: новрап; правило, оматање текста мења се на следећи начин:
.тектЦонтаинер / *… * / вхите-спаце: новрап;
Тхе пре Вредност вхите-спаце чува све просторе и спречава оматање текста:
.тектЦонтаинер / *… * / вхите-спаце: пре;
Тхе пре-врап Вредност вхите-спаце чува све просторе и облаже текст:
.тектЦонтаинер / *… * / вхите-спаце: пре-врап;
Коначно, пре-лине Вредност вхите-спаце чува вертикалне белине као што су нове линије и облаже текст:
.тектЦонтаинер / *… * / вхите-спаце: пре-лине;
Ворд бреакс
Још једна важна ЦСС особина коју треба да знате за контролисање преламања текста је ворд-бреак. На свим екранима можете видети све прегледнике омотао текст пре речи “Здраво” на десној страни, иза које тект оверфловед. Прегледач није прекршио реч.
Међутим, ако ви морати дозволите разбијање слова у једној речи да би текст изгледао чак и са десне стране, морате користити бреак-алл вредност за ворд-бреак својство:
.тектЦонтаинер / *… * / ворд-бреак: бреак-алл;
Тхе ворд-бреак власништво има и трећу вриједност бреак-алл и нормал (припадају подразумеваном прекиду линије). Тхе задржи све вредност не дозвољава ломљење речи.
Можда нећете моћи да видите ефекат задржи све на енглеском. Али, на језицима где су слова у речи самосталне јединице, претраживач може сломити речи приликом оматања, што се може спријечити употребом задржи све.
На пример, слова у корејским речима, првобитно сломљена за оматање, се држе заједно када бели простор: чувајте све; правило је наведено.
А¬А? А¸АªА³А ?? А «А¥А¼ А-А-А¥А-А ?? А «А ?? А ?? А-А ?? А ??, А¬А А А А «А ??¬А½А ?? А «А ?? А ?? А« А¡А ?? А-А ?? А ?? А¬А ?? А-А¬А ?? А ?? А¬А? А¤. А¬А А ?? 10А-А ?? А ?? А¬А А А А «А ??¬А½А ?? А «А ?? А ?? АªАµА-А¬А А ?? А-А ?? А ?? А¬А ?? А ?? АªА ° А ?? 1997А «А… А ?? 3А¬А ?? А ?? 10А¬А? А¼А «А¶А ?? А-А ?? А ° 12А¬А? А¼АªА¹А ?? А¬А§А ?? А «А ?? А… А¬А? А¼А¬А ?? А ?? А «А§А ?? А¬А? А¸А¬А¦А ?? А¬А-А ?? А¬А ?? А ?? А¬А-А´А «А¦А½А «А ?? А ?? А« А А А¤. А¬А§А ?? АªА¸А ?? А «А ± А« А¡А ?? А-А ?? А ?? А¬А ?? А-А¬А ?? А ?? А¬А? А¤. А¬А? А´ А-А ?? А ?? А¬А ?? А ?? А¬А-А ?? А¬А ?? А? А «А ?? А¬А-А… АªА³А ?? А¬А А ?? А «А ° А ?? А¬А ?? А ?? А¬А А ?? А «А¬А¸АªА ° А ?? А «А А А¤А¬А? А´ А-А ?? А¨АªА »А ?? А «АªА¨А¬А-А¬ А «А А А¤А¬А ?? А ?? АªА³А¼ АªА ° А ?? А¬А ?? А ?? А «А¶А ?? А¬А? А¼А «А¥А¼ А «А А А¤А «А £ А¹А «А ?? А ?? А« А А А¤.
.тектЦонтаинер / *… * / ворд-бреак: кееп-алл;
Ова особина може подржати другу вриједност која се зове бреак-ворд убудуће. Видећете како бреак-ворд ради касније, у “Оверфлов врап” овог члана.
Ворд бреак могућности
И програмери могу додајте могућности преламања унутар речи, помоћу
А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Хелло А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво. А¢А ?? А ?? Здраво.
.тектЦонтаинер / *… * / вхите-спаце: пре-врап;
Без
Хипхенс
Тхе цртице ЦСС својство је други начин контроле прекида између слова у речи. Имамо посебан чланак о ЦСС-у, ако сте заинтересовани. Укратко, имовина вам дозвољава створите могућности за оматање помоћу цртања.
Његово ауто вредност захтева од претраживача да аутоматски подесити и разбити речи по потреби вхиле враппинг. Тхе упутство вредност присиљава прегледаче на замотајте (ако је потребно) у могућности додавања ријечи које смо додали, као што је знак цртице (‐) или (мекана цртица). Ако ниједан дат је као вредност која би постојала нема умотавања у близини цртице.
блуехоусе блуехоусе блуехоусе блуехоусе блуехоусе блуехоусе блуехоусе блуехоусе блуехоусе блуехоусе блуехоусе
.тектЦонтаинер / *… * / -вебкит-хипхенс: ауто; -мс-цртице: ауто; цртице: ауто;
Оверфлов врап
Тхе оверфлов-врап ЦСС својство контролише ако а претраживач може прекршити ријечи (или сачувани простори, подршка за које се може догодити у блиској будућности) он оверфлов. Када бреак-ворд вредност је дата за оверфлов-врап, Реч ће бити сломљена у случају не постоје друге могућности за меко омотавање у реду.
Напоменути да оверфлов-врап је такође познат као прелом редова (они су алиасе).
блуехоусеблуехоусеблуехоусеблуехоусеблуехоусеблуехоусеблуехоусеблуехоусеблуехоусеблуехоусеблуехоусеблуехоусе \ т
.тектЦонтаинер / *… * / оверфлов-врап: бреак-ворд;
Без размака између слова у горе наведеном ХТМЛ коду (тј. Нема могућности за оматање), текст није прво омотан и сачувана је као једна реч.
Међутим, када је дата дозвола да се текст прекине разлагањем речи (тј бреак-ворд вредност је дата оверфлов-врап), тхе умотавање се догодило разбијањем цијелог низа где год је било потребно.
