Неразрывный пробел HTML

Неразрывный пробел HTML

Приветствую вас, дорогие посетители сайта Impuls-Web!

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

Давайте разберемся с вами, что такое неразрывный пробел HTML, и как он может быть полезен нам при верстке сайтов.

Что такое неразрывный пробел HTML?

Итак,   (non-breaking space) — это специальный символ, который при отображении в браузере выглядит как обычный пробел, но имеет одну, очень важную особенность. При задании символ   мы получим заданное пространство между словами, которое ни в коем случае не будет разорвано при перестроении текста.

Способы использования  

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

  1. 1.В случае если при верстке страницы нам необходимо предусмотреть вероятность того, что при просмотре страницы сайта на мобильных устройствах текст будет перестраиваться, и мы можем получить не желательные разрывы слов или чисел. Например:
    10 000 руб.

    При перестроении будет выглядеть так:

    10
    000
    руб.

    Если же указать данное число с использованием неразрывного пробела html:

    то получим вот такой вид числа при перестроении:

    10 000 руб.

    То есть ни каких изменений не произойдет, и данный набор символов ни при каких условиях не будет разорван.

  2. 2.Наверняка вы сталкивались с такой проблемой, когда вам нужно задать между словами в тексте большее расстояние, чем один отступ, но задать такое расстояние не получается так как браузер или редактор CMS объединяет лишние пробелы, воспринимая их как ошибку.

    Задать произвольное фиксированное расстояние между словами можно так же с помощью неразрывного пробела html. В данном случае вы получите расстояние между словами равное количеству заданных символов  .


Надеюсь, данная статья будет для вас полезна, и показанные в этой статье приемы работы с неразрывными пробелами HTML пригодятся вам при верстке страниц ваших сайтов. Если данная статья вам понравилась, обязательно подпишитесь на мою рассылку, оставьте комментарий под статьей и сделайте репост в социальные сети.

До встречи в следующих статьях!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

1 комментарий

  1. .статья.очень.полезна.сейча. Мне. Понятно. Почему. Ссылки. Данного. Айта. Не. Открывались

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif