Символ пробела в HTML

По умолчанию, любое количество пробелов идущее в html-коде подряд, на web-странице отображается как один. Что можно сделать, если необходимо выводить несколько подряд идущих пробелов?

Как вариант можно использовать тег <PRE> определяющий блок предварительного форматирования текста. Такой текст обычно отображается моноширинным шрифтом и со всеми пробелами между словами. Например, следующий html-код:

<PRE>  перед строкой два пробела
между словами   три пробела</PRE>


Будет интерпретирован браузером следующим образом:

  перед строкой два пробела
между словами   три пробела

Чтобы избавиться от отображения текста моноширинным шрифтом, можно воспользоваться CSS-правилом white-space: pre. Например:

<div style="white-space: pre">текст с   пробелами
    без моноширинного шрифта</div>

Результатом интерпретации браузером приведённого html-кода станет следующее:

текст с пробелами
без моноширинного шрифта

Здесь, следует отметить тот факт, что в обоих вариантах слишком длинная строка не будет переноситься, если достигнет конца какой либо области. Эту проблему может решить использование CSS-правило: white-space: pre-wrap — однако, что касается браузера Internet Explorer, то в старых его версиях, указанные CSS-правила могут не сработать.

Наиболее же оптимальным вариантом здесь может быть использование escape нотации символа пробел, который в других контекстах обычно называется «непрерывным пробелом» (англ. no break space), представляющий собой комбинацию: &nbsp;. Например, html-код:

&nbsp; перед строкой два пробела<br />
между словами &nbsp; &nbsp; пять пробелов

Будет интерпретирован браузером следующим образом:

  перед строкой два пробела
между словами     пять пробелов

Обратите внимание, что «непрерывные пробелы» интерпретируются браузером, как и слова, между которыми можно поставить обычные пробелы. В тоже время, слова разделенные только «непрерывными пробелами», достигнув конца какой либо области, как и в случае с тегом <PRE>, переноситься не будут. Например:

слово1&nbsp;слово2

Это удобно если необходимо соблюсти правила смыслового переноса слов.

Похожие заметки

  • CSS центрирование по вертикали
    Основы блочной вёрстки на примере центрирования блочных элементов шаблона по вертикали, используя CSS-свойства: display:table-cell, line-height или po...
  • CSS центрирование по горизонтали
    Основы блочной вёрстки на примере центрирования блочных элементов шаблона по горизонтали, используя CSS-свойства: text-align и margin....
  • HTML для начинающих
    Небольшая вводная статья о HTML для начинающих. Что такое HTML и основы вёрстки html-кода....
16.07.2010 Рубрика: Веб-мастеру