Научете се да използвате празно пространство в CSS

CSS има много полезен параметър, наречен бяло пространство и вероятно ще остане незабелязано сред начинаещите. Може би известно време ще можете да живеете без този параметър, но щом научите как да го използвате, ще разберете колко полезен и удобен е този параметър, че ще го използвате във всеки проект.

В тази статия ще се опитаме да ви кажем как можете да използвате параметъра бяло пространство, и какви значения има. Ще се опитаме да стоим настрана от конкретен жаргон, но предварително ви предупреждаваме, че този параметър е много трудно да се обясни с прости думи.

Неща, които трябва да знаете за HTML

В (X) HTML, всеки път, когато трябва да обедините празни пространства в кода си, стандартната изходна страница обединява всички тези пространства в едно пространство. Това е много удобно, тъй като ни позволява правилно да отменим и разделим елементи в нашия (X) HTML по ясен начин. Тези. без излишни интервали и прекъсвания на редове.

Ако искате всички интервали и нови редове да се появят естествено, тогава можете да използвате най-добрия приятел на параметъра white-space, тагът „pre“. Цялото немаркирано съдържание, включено в предварителния маркер, ще бъде представено идентично на съдържанието, включено в други тагове. Може дори да накара един ред да разшири границите на родителя, ако оформлението не включва опции за прекъсване на реда. И така, тъй като HTML стандартът игнорира множество интервали и нови редове, можете да ги замените с тага „pre“.

Параметърът за празно пространство е по-ясно CSS решение по отношение на горните (X) HTML методи.

Определение и възможни значения

Чрез няколко възможни стойности параметърът за празно пространство чрез CSS ни позволява да определим как браузърът ще изобразява множество интервали и нови редове. Разбира се, частта от документа, която искате да дефинирате, е ограничена до това, което можете да определите с CSS селектори.

Има няколко различни стойности за параметъра за празно пространство. Можете да се запознаете визуално с това как работи всяка от стойностите:

Това е стойността по подразбиране. Ако е посочено, тогава в резултат ще видим същото, което се случва, когато не използваме маркерите „pre“. Често тази стойност се използва само когато някоя друга стойност вече е посочена и трябва да върнете дисплея обратно към стандарта, т.е. до стойността "нормално".

Това е най-честата стойност, използвана с параметъра white-space, тъй като прави същото като нормалното, но не поема обработката на нови редове. Освен това дори естествените преходи на линии няма да бъдат показани, тъй като ограниченията ще бъдат деактивирани.

Елемент, който е зададен на параметър бяло пространство със стойността nowrap, по никакъв начин няма да позволи на текста да се пречупи на нов ред, а вместо това ще разшири границите на родителския елемент, докато редът е напълно завършен и докато целият текст се показва в един цял ред. Вярно е, че тази стойност не засяга интервалите между символи и друго съдържание, така че те, както в стандартния случай, ще се добавят в едно пространство.

Предварителната стойност работи точно както бихте очаквали: Същото като маркерите „pre“. Вземат се предвид всички интервали и прекъсвания на редове, т.е. резултатът от показването в браузъра съответства на кода. Също така, следвайки условията за използване на тага "pre", ако всичко в кода е разположено на един ред, тогава този ред ще измести границите на родителския елемент, така че в резултат на показването на всичко се намира на един ред.

Стойността е почти същата като нормалната стойност, с изключение на едно нещо: вземат се предвид прекъсванията на редовете в HTML кода. Така че, ако имате няколко интервала между елементите, това ще бъде игнорирано, но ако в кода има нов ред, тогава в изхода ще получим и нов ред. Тази стойност не се поддържа от Internet Explorer преди версия 7, Firefox преди 3.0 и Opera преди версия 9.2.

Стойността работи по същия начин, както преди, с изключение на естествените прекъсвания на линии, за да съответстват на границите на родителя. Тези. няма да има принудително подреждане на цялото съдържание на един ред, както е посочено в кода, но ще бъдат взети предвид множество интервали и конкретни нови редове. Стойността не се поддържа в браузърите Internet Explorer до версия 7 и Firefox до 3.0.

Вероятно най-честата причина за използване на параметъра за празно пространство е, когато параметърът е приложен към връзка, която може да премине към нов ред при определени обстоятелства. Погледнете екранната снимка по-долу:

Друго използване на този параметър е, когато искате да предотвратите увиването на редица вградени клетки в нов ред. Забелязахме това в предишна статия за центриране на множество блокове на един ред.

Един от възможните проблеми за начинаещи, когато използват този параметър (както споменахме по-рано), е, когато смятат, че параметърът white-space: nowrap, приложен към елемент, ще му попречи да се пречупи на нов ред, ако е част от група с плаващ елемент. . Но в действителност параметърът бяло пространство ще повлияе само на вътрешните елементи, които са вътре в елемента, към който е приложен параметърът, и няма да има ефект върху блоковите елементи или пропуските в самия елемент.

Както беше отбелязано, в по-голямата си част този параметър се използва със стойността на nowrap, тъй като тази стойност може да осигури поне някаква полза. Тъй като стойностите за предреждане и предварително увиване не работят в Internet Explorer, те не се използват често, но също така ще бъдат от полза, ако в бъдеще има обширна поддръжка за тези стойности.