Css довідник і статті (селектори, елементи, атрибути КСС) - властивість white-space теги pre і nobr

Нам часто доводиться контролювати прогалини і переклади рядків (whitespace) за допомогою тегів pre, nobr і табличного властивості nowrap. Але все це можна поєднати в одному довідковому CSS властивості white-space.

Нам часто доводиться контролювати прогалини і переклади рядків (whitespace) за допомогою тегів pre. nobr і табличного властивості nowrap. Коли ми хочемо зберегти елементарне форматування тексту, ми використовуємо тег pre. який зберігає прогалини і переклади рядків. Якщо ж нам потрібно зробити так, щоб текст не переносився ні за яких обставин (виняток - насильницька установка br), то на допомогу приходить нестандартний тег nobr і властивість nowrap.

Але всі ці особливості верстки можна поєднати в CSS властивості white-space. За специфікації воно має кілька значень, про функції яких можна здогадатися з їх назви: normal | pre | nowrap | inherit.

Найбільш важливими є значення pre і nowrap. Наведу наочні варіанти їх використання:

Якщо б я жив в Сахарі,
я б писав про пісок:
про червоний піску — в ударі,
про сірому піску — в тузі.

Якщо б я жив в Сахарі, я б писав про пісок: про червоний піску - в ударі, про сірому піску - в тузі.

Для отримання самого оптимально результату змінюй себе, будь гнучким.

Для отримання самого оптимально результату змінюй себе, будь гнучким.

А тепер найцікавіше. Підтримка браузерами властивості white-space. Тут, на жаль, присутня деяка нісенітниця. Найбільш примітним є те, що Internet Explorer аж до шостої (!) Версії не визнає значення pre. коли як навіть «дідок» Netscape Navigator 4.x відмінно його сприймає. Opera ж ще з четвертої версії повністю підтримує властивість white-space. Для повноти картини давайте подивимося на наступну табличку:

Слід зауважити, що IE до версії 5.5 абсолютно не визнавав властивість white-space. Тому-то, напевно, це властивість і використовують так рідко ...

P. S. Незабаром після написання цієї замітки я вирішив подивитися, що думає про властивості white-space MSDN і виявив цікаву річ. Виявляється, що IE6 підтримує-таки значення pre. Для цього, правда, повинен бути вказаний «правильний»! DOCTYPE.

Хітові статті про розробку сайтів

Повідомлення будуть приходити пару раз в тиждень, не частіше

Мене звуть Олександр Шуркаев.
OMG. я вже майже пару десятків років займаюся веб-проектами.
На персональному сайті можна ще дещо дізнатися.

Візьміть участь

Деякі мої проекти

RSS заміток і твіттер проекту