Огляд css-властивості white-space, черговий блог фрілансера

Огляд CSS-властивості white-space

Мало хто, початківці CSS-кодери знайомі з таким корисним властивістю як white-space. Ви цілком можете обходитися без цієї властивості довгий час, але одного разу, дізнавшись про нього, ви знайдете його дуже зручним, і будете повертатися до нього знову і снова.В сьогоднішній статті, ми розглянемо можливі значення властивості white-space. а також способи їх застосування.

Невелике HTML-введення

При вставці тексту в (X) HTML, незалежно від того, скільки пропусків ви поставите між словами, при виведенні сторінки у вікні браузера, всі ці прогалини, за замовчуванням, будуть скорочені до одного. Це досить зручно, оскільки ми легко можемо форматувати текст в коді, з тим щоб поліпшити його Новомосковскемость, при цьому, не створюючи додаткових пробілів і непотрібних розривів рядків.

Однак, якщо ж ви хочете відобразити всі прогалини і переноси рядків - вам допоможе тег

. Весь текст всередині тегів 
 (Якщо він не укладено в додаткові теги), буде виведений точно також, як він відформатований в коді. При цьому, навіть якщо в розмітці немає жодного розриву рядка, тег 
 все одно додасть одну сходинку, для створення додатково відступу. Отже, ви можете використовувати вищевказаний тег для перевизначення дефолтного підведення HTML.

Крім того, в (X) HTML є можливість використовувати нерозривний пробіл (  ), Який використовується для створення множинних пробілів. Раніше, для цих цілей використовувався, застарілий на сьогоднішній день, тег  .

Властивість white-space - це CSS-аналог всіх перерахованих вище (X) HTML-методів управління пробілами.
Опис і можливі значення
За допомогою набору можливих значень, властивість white-space, дозволяє нам управляти поведінкою браузера, при обробці множинних пробілів.
Далі представлений список різних значень властивості white-space, разом з візуальної демонстрацією їх дії.
Значення: normal
Це дефолтний значення, при якому текст відображається звичайним способом. Значення normal слід використовувати тільки в одному, єдиному випадку - якщо ви вже призначили тексту інший спосіб обробки, і тепер хочете перевизначити його для якогось фрагмента.

Це найбільш поширене значення властивості white-space. оскільки воно повністю ідентично значенням normal. за винятком однієї особливості. Значення nowrap повністю ігнорує переноси рядків, незалежно від того, чи були вони проставлені в коді, або ж з'явилися при обробці тексту, за рахунок обмеженого контейнера.
Елемент, якому призначено властивість white-space: nowrap, замість того, щоб переносити текст або інші малі елементи на новий рядок, розширить кордони батьківського блоку, до тих пір, поки вміст не вміститься в один рядок. На додаток, множинні прогалини будуть скорочені до одного, також як при значення normal.

Значення: pre
Значення pre. повністю відповідає вашим очікуванням - ви отримуєте рівно те форматування, яке бачите в коді. Враховуються всі прогалини і переноси рядків, як якщо б текст був укладений в теги 
. Крім того, якщо в коді, ви розмістили текст без переносів, то кордону батьківського контейнера будуть розширені, для розміщення тексту в один рядок.


Значення: pre-line
Це значення працює точно також як дефолтний значення normal. за винятком однієї деталі: при обробці будуть враховуватися переноси рядків. Так що, множинні прогалини будуть як зазвичай проігноровані, але якщо у вашій розмітці є переноси рядків, то всі вони з'являться при виведенні в браузері.
Підтримка цієї властивості браузерами, залишає бажати кращого, а саме:

Internet Explorer - починаючи з версії 7
Firefox - починаючи з версії 3.0
Opera - починаючи з версії 9.2


Значення: pre-wrap
Це значення практично те ж саме що і pre. за винятком того, що текст виводиться в межах свого батьківського елемента. Отже, текст не буде витягуватися в один рядок для імітації форматування в коді, але множинні прогалини і переноси рядків будуть враховані.

Internet Explorer - починаючи з версії 7
Firefox - починаючи з версії 3.0


приклади використання
Найбільш часто, властивість white-space. використовується для усунення небажаних переносів рядка. Погляньте на картинку:

висновок
Щоб виключити можливу появу проблем, при використанні властивості white-space. слід пам'ятати головне: область його дії поширюється тільки на малі елементи контейнера, до якого застосовується властивість.
Як уже згадувалося вище, найбільш корисним з усіх можливих значень властивості white-space - є значення nowrap. У зв'язку з відсутністю в Internet Explorer повної підтримки значень pre-line і pre-wrap. вони використовуються не так часто, хоча теж можуть принести чимало користі, якщо отримають ширшу підтримку.
Розповісти друзям