Пробелы и пробельные символы в языке HTML

02 Янв 2012 в 19:09

Столкнулась  с проблемой форматирования строк, когда необходимо, чтобы слова не разрывались переносом в разных браузерах. Пришлось разбираться, как в языке Html интерпретируются символы пробела, переноса строки (Enter) и табуляции, и как осуществляется перенос текста в окне браузера при изменении его размера.

 Браузер, по умолчанию,  старается заполнить текстом все свободное пространство по ширине, но как только изменится ширина этого пространства, то сразу же изменится и формирование текста. Возникают новые переносы, т.е браузер динамически переформатирует текст страницы  на основании символов пробела. В Html в качестве пробельных символов используются:

  1. пробел (клавиша пробела на клавиатуре)
  2. табуляция (соответствующая клавиша)
  3. перенос строки (клавиша Enter)

Именно по каким-то из этих символов пробела в Html коде и осуществляется перенос строки при форматировании текста в браузере. У разных посетителей сайта будут разные размеры экрана браузера и, следовательно, перенос текста во всех этих случаях может происходить по разному (если используется, например, резиновый макет — Div верстка в Html и CSS). Типичным примером может служить поисковая выдача Яндекса, где макет подстраивается под размер экрана по ширине, но до определенной минимальной ширины.

Но даже если используется фиксированный макет, то все равно при написании статьи в визуальном редакторе используемого движка сайта (cms), нельзя точно знать, где именно произойдет перенос строки и по какому именно пробельному символу.

Для того, чтобы не допустить разрыва конструкций типа «100 руб.» при формировании переноса в браузере по символу пробела в Html коде, необходимо использовать в Html коде не обычный символ пробела, а спецсимвола (мнемоники) неразрывного пробела, который выглядит так:

 

А Html коде web документа для формирования неразрывного пробела прописывается:

100 руб.

Спецсимвол (мнемоника) неразрывного пробела не интерпретируется браузером как обычный символ пробела и перенос по нему не произойдет ни при каких обстоятельствах.

Если Вам понравилась статья, буду благодарна за комментарий 🙂

 

Буду благодарна, если Вы поделитесь этой статьей:

0

Рубрики: 2.1. Работа с контентом сайта

Обсуждение
Отзыв Елена 26 декабря 2011

Добрый день! Я часто захожу на Ваш блог и заметила, что Вы всегда отвечаете на вопросы и помогаете решить проблему. У меня возникла проблема такого характера: когда статья находится на главной странице, виден первый абзац статьи, когда статья попадает в архив, она почему-то развернута и можно ее прочитать не заходя в статью. Таким образом снижается показатель просмотров статьи. Вопрос: как сделать так, чтобы попадая в архив, видно было название статьи и первый абзац? Спасибо.

[Ответить]

admin Ответил(а):

Здравствуйте, Елена! Ваша проблема решается очень просто. При наборе текста статьи Вы должны определить часть текста, который будет доступен читателю на странице, остальную часть текста статьи необходимо «спрятать» тэгом &quot, который в редакторе имеет значок разорванной посредине страницы.

[Ответить]

Отзыв Елена 26 декабря 2011

хм…..а теперь, пожалуйста, русским языком, подскажите, где найти этот тег, а еще лучше — какую кнопку нажать и где она находится? Спасибо.

[Ответить]

Ваш отзыв