Инструкция как в HTML коде сделать длинный неразрывный пробел
В этой инструкции вы узнаете о том как вставить неразрывный пробел в HTML. Расскажу об особенностях и нюансах вставки длинных пробелов в код.
Самое главное — не стоит путать неразрывный пробел с обычным!
Что такое неразрывный пробел в HTML?
Неразрывный пробел — спецсимвол в HTML (см. также что такое HTML), благодаря которому браузер будет воспринимать каждый из этих пробелов как те, которые нужно отобразить, а не игнорировать.
Пример предельно простой. Многие из вас наверное помнят, как осуществляли «форматирование пробелами» какого-нибудь важного документа, будучи начинающими пользователями Ворда. Поставишь 30 пробелов подряд и, что называется, будет выравнено как надо!
В HTML такие фокусы не прокатят. Если я сейчас напишу 30 пробелов при написании поста в HTML-редакторе, он просто проигнорирует их, отображая лишь один.
И, соответственно, не проигнорирует неразрывный пробел как элемент форматирования вашего HTML-кода.
Еще одна фишка длинного неразрывного пробела в том, что использование его в длинной строке «запрещает» ее разбиение в местах использования. Что это значит? Это значит, что такой пробел будет уместно использовать в тех местах, где перенос словосочетания на новую строку нужно осуществить полностью, не разбивая его на отдельные слова.
Как в HTML сделать неразрывный пробел?
Приведу пример для интернет-магазинов. В длинной строке использование пробела в тексте или таблице обычным текстом «25 000 долларов» может привести к тому что в отдельных случаях у вас «25» будет на одной строке, а «000 долларов» — на другой. Сходные ситуации действительно возможны и неразрывный пробел страхует от этого. Код:
25 000 долларов
При использовании этого кода, запись «25 000 долларов» будет целиком на новой строке, если браузер вдруг захочет ее перенести (в случае если не влезает).
Пример кода неразрывного пробела (non-breaking space) позволит вам сделать пробел в любом месте HTML-страницы:
Неразрывный пробел, это не тег, а спецсимвол. Поэтому его нужно сопровождать сначала амперсандом, а в конце — точкой с запятой. Что это дает? Браузер видит где у спецсимвола начало и конец, а значит вы сможете вставить несколько пробелов подряд:
Обычно конечно это не требуется. Все гораздо приземленнее, например, если нужно перенести на новую строку ФИО целиком, а не делая инициалы «повисшими» на предыдущей строке (или если речь идет о большом и длинном числе вида 900 000 000). Код:
Кстати, в Ворде неразрывный пробел вставляется CTRL+SHIFT+SPACE.
Распространено некорректное применение неразрывного пробела в верстке — для задания отступов между элементами навигации или абзацем и картинкой. Вы должны понимать, что не надо так. Лучшее решение подобных задач — тегом <div></div> или <span></span>.
Итог
Резюмируя:
- Если у вас встречается потребность в нескольких пробелах подряд, используйте спецсимвол nbsp между словами столько раз, сколько нужно.
- Помните, что длинный пробел не позволяет разорвать строку на месте словосочетания — используйте этот спецсимвол с умом, не злоупотребляя и не применяя в качестве «напильника» для того, чтобы поправить немного верстку.
- Для регулирования длины пробела используйте ensp и emsp. Ensp — длинный пробел, равный длине двух обычных пробелов (длина «N»). Emsp — самый длинный пробел, по длине равный четырем обычным пробелам (длина «M»).
Есть также принудительный разрыв строки br и предварительное форматирование текста тегами <pre></pre>, но это тема отдельной статьи и поговорим мы об этом как-нибудь потом.
Памятка: не забудьте о том, что набор HTML-кода нужно осуществлять в редакторе для обработки кода (в WordPress есть специальная вкладка для этого).
Пробелы в HTML
Вы здесь: Главная — HTML — HTML Основы — Пробелы в HTML
Все, кто пытался создавать сайты на HTML сталкивались с такой проблемой. Почти все теги HTML вырезают лишние пробелы. И в этот раз я Вам приведу пример этой «вырезки», а также расскажу, как сделать так, чтобы пробелы не вырезались.
Давайте для начала напишем простой HTML-код:
<p>Некий текст Продолжение...</p>Если Вы посмотрите на результат, то увидите, что все наши пробелы были вырезаны и остался только один. И так делает почти каждый тег.
Существуют три варианта отображения дополнительных пробелов в HTML
<pre><p>Некий текст Продолжение...</p></pre>В результате, Вы увидите, что пробелы остались, а именно этого мы и добивались.
Но есть и другой способ, который я использую регулярно — сущность « «. Данная сущность просто заменяет символ пробела:
<p>Некий текст Продолжение...</p>В результате, Вы также увидите целую череду пробелов. Для меня данный способ лучше тем, что не нужно использовать лишних тегов. Но это дело вкуса. Где нужен дополнительный пробел в HTML, просто вставляете « » и радуетесь результату.
И, наконец, последний способ — это использование CSS. Для этого Вам достаточно добавить такой стиль:
p {
white-space: pre;
}Данный способ самый быстрый и простой, однако, я его не использую, так как в моей практике встречается мало случаев, в которых мне приходится добавлять много подряд идущих пробелов. А если они и случаются, то использую сущность « » несколько раз. Вдобавок, свойство white-space поддерживается не всеми браузерами (в частности, IE6 и IE7 не поддерживают), что уже ограничивает область действия данного способа.
В общем, резюмирую:
1) Если у Вас какая-нибудь часть текста содержит много пробелов в разных местах, то используйте тег <pre>.
2) Если у Вас где-нибудь встречается одиночный момент, где нужно несколько пробелов подряд, то используйте сущность « «;
3) Если же у Вас вся страница соткана из кучи подряд идущих пробелов (хотя это бывает крайне редко), то используйте свойство white-space со значением pre.
Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html
-
Создано 07.12.2010 10:41:18 -
Михаил Русаков
Создано 07.12.2010 10:41:18
Михаил РусаковКопирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
неразрывный пробелПдобных символов escape последовательностей достаточно много, например: Предлагаем вам так же ознакомиться со всей таблицей символов html ⇒. Очень часто в коде html страницы можно увидеть запись <span> </span> или <div> </div> это не что иное, как обозначение пустого блока. Пустым он может оказаться по разным причинам, например нет информации для вывода по какому то запросу или требуется какой либо отступ, или это ошибка верстальшика. Так же данная ошибка может возникать при неправильно настроеной CMS — системе управления содержимым сайта. Так же встречается выражение <td> </td> так происходит когда ячейку таблицы, без информации, надо обозначить, а на ее месте выводилось бы пустое место. Таким же способом можно обозначить АБЗАЦ, при этом допускается использование неразрывного пробла несколько раз подряд. Скажем так сфера его применения довольно-таки разнообразна и самое главное очень полезна! |
что это? Пустое место, имеющее значение
Простой пробел и специальный символ схожи только в одном: они означают разделение слов, тегов, атрибутов и прочих элементов разметки. Однако использование обычного пробела актуально только для повышения читабельности содержимого страницы и ради удобства работы с ней в текстовом редакторе.
Для браузера и его языка JavaScript количество пробелов между словами, тегами и другими элементами не имеет никакого значения.
Применение пробелов
Пробел — самый нужный символ. Хоть он «пустой», но очень полезный. Даже в старые добрые времена, когда имели важное значение такие символы, как «перевод строки» и «возврат каретки», любое количество пробелов в любом месте кода применялось только для повышения его читабельности. Но само по себе пустое место «очень ценилось».
Правильно манипулировать словами, ключевыми словами и синтаксическими конструкциями, отличать код программы от комментария по сей день ни один компилятор (интерпретатор) не научился. Без знатных лексем вроде паскалевского (pascal) «:=» и пээлевской (PL/1) «;», валютно-ориентированного новшества «Пэхапе» (PHP) — «$» в имени переменной обошелся, разве что «Фортран», у которого каждому оператору надлежало находиться в отдельной строке.
Принципиально сказанное означает, что естественной способности разделять слова и фразы, отличать фразы от предложений, а в последних улавливать законченный смысл у искусственных языков по-прежнему нет.
Но простой пробел может быть в любом количестве в любой строке, и у него есть обязательный цифровой код. Пробел — это не пустое место ни в коде, ни в значении переменной. Это очень важный символ. Следовательно, значение имеет и nbsp. Что это? Сейчас рассмотрим.
Идеальная система: то, чего нет, но так необходимо
Многие области применения письма и вывода контента требуют точного соблюдения правил оформления. Простой пример — списки.
Неправильный список:
- __первая строка;
- _вторая строка;
- третья строка.
Правильный список:
- первая строка;
- вторая строка;
- третья строка.
Здесь символ «_» обозначает простой пробел, который может быть указан по ошибке или образуется вследствие выравнивания текста элемента списка по обеим сторонам абзаца.
Принципиально, что содержание элемента списка должно следовать сразу за номером. В частности, текстовый редактор MS Word еще в самом начале своего существования предложил использовать неразрывный пробел (комбинация клавиш ctrl+»пробел»), чтобы запретить разрыв между элементами строки.
Неразрывный пробел склеивал два соседних слова, причем совершенно не обязательно, чтобы они оба были таковыми. А в случае списков, когда номер элемента не входит в содержание абзаца, склеивание выполняется к началу строки.
В те времена, когда MS Word уже пользовался неизменным успехом, язык гипертекста еще только формировался, но наличие в нем специальных символов предполагалось изначально. Другое дело   — что это такое и зачем оно нужно, не сразу было понятно.
Использование в заголовках
Правильный заголовок не разрывается, а слова в нем не переносятся. Он центрируется или выравнивается по той или иной стороне. Без использования неразрывного пробела трудно обойтись.
В языке гипертекста это будет выглядеть так:
7. 5. Руководство по инсталляции FreeBSD
На HTML-странице в браузере номер заголовка будет выглядеть так: «7. 5. » и все, таким образом оформленные заголовки будут строго одинаковыми.
Есть момент, на который стоит обратить внимание, если в заголовке используется текст и картинка. Браузер все выводит последовательно, именно так, как определено входящим потоком. Тег img располагается в самом начале строки, но чтобы текст разместился сразу за картинкой, нужно учесть ее ширину.
Использование в контенте страницы
Абсолютное позиционирование текста в редких случаях может помочь. Обычно заголовки и текст идут одним потоком, но с разными тегами, например h3 и p.
Чтобы сместить текст вправо от картинки, очень удобно применить несколько .
В следующем примере необходимо вывести иконки типов загружаемых файлов и написать рядом соответствующие расширения текстом.
Кодирование выполнено на PHP с использованием nbsp. Что это такое и как используется? Теперь становится ясно. Аналогично символ неразрывного пробела применяется в JavaScript.
Применение в строках
При обработке строк (как на сервере, так и внутри браузера) неразрывный пробел не используется — слишком накладно применять вместо одного значимого символа » «, целых шесть « ». Однако, когда строка отправляется в вывод, в поток браузера, необходимо перекодировать все символы пробела в надлежащее количество неразрывных пробелов.
Вывод в echo или print_r последовательности более одного пробела не будет иметь нужного эффекта и контент «поползет». Например (PHP):
- echo «2____Привет!»; // здесь «_» обозначает символ » «.
- echo «2 Привет!»
Будут иметь различный эффект, если тег имеет выравнивание justify. В первом случае цифра 2 будет напечатана с левого края блока, в который был сделан вывод, а текст «Привет!» — с правого.
NBSP — что это и как применять? Важная информация
Между тем, проблема вовсе не в пробелах. Непечатаемых символов на самом деле очень много, и далеко не всегда они используются правильно. Стоит вспомнить, как оформляют документы пользователи MS Word. Когда нужно написать слово «директор» слева, а его фамилию справа, подавляющее большинство лепят подряд несколько символов табуляции — быстро и эффективно.
Вместо того, чтобы правильно выставить значение символа табуляции и выравнивание на нем, пользователь нажимает несколько раз tab и получает нужный эффект.
Аналогичная ситуация в языке разметки HTML. Многие разработчики не используют специальные символы правильно, не применяют нужные стили так, как это положено делать, и результат: «Привет, Мир, я 3-й раз ошибся…» — будет растянут по всей ширине блока, в которую эта строка была выведена.
Если перекодировать строку в «Привет Мир, я 3-й раз ошибся…» — результат будет именно таким, каким он должен быть.
Знать и использовать специальные символы — очень хорошая идея. Особенно если у вас есть желание делать эффективные и качественные страницы, в которых контент расположен качественно и аккуратно.
Интересные HTML теги, о которых никто не знает
Наверно не многие из Вас знают, что в языке HTML есть специальный тег для задания аббревиатур, или тег для обозначения адреса. В данной заметке будет приведено несколько html тегов которые могут очень пригодиться при создании сайтов, но очень редко используются.
Атрибут tabindex
Этот тег определяет порядок перехода между полями формы по клавише «Tab»:
<form action="#"> <input type="text" tabindex="1" /> <a href="#">Забыли пароль</a> <input type="password" tabindex="2" /> <input type="button" value="Войти" tabindex="3" /> </form>
В этом примере по нажатию клавиши «Tab» мы пропускаем ссылку «Забыли пароль».
Тег <wbr>
Тег <wbr> позволяет указать браузеру, где нужно сделать сброс строки, когда это необходимо:
А знали ли вы, что этот тег<wbr>используется очень редко?
Нeразрывный пробел
Нeразрывный пробел — это антоним к тегу <wbr>. С помощью неразрывного пробела, мы указываем браузеру, между какими словами нельзя делать сброс строки, в следствие чего, эти слова переносятся вместе:
Покупайте лучшую офисную бумагу у компании «Бумага Качество Инвест»!
В данном случае название фирмы перенесется на следующую строку вместе, а не раздельно.
Тег <cite>
Тег <cite> является «младшим братом» тега <blockquote>. Этот тег определяет текст на странице как ссылку. По-умолчанию, текст внутри этого тега выделяется курсивом, что легко меняется с помощью стилей.
Использовать этот тег можно для цитирования библиографий и других ссылок сайта.
Тег <optgroup>
Тег <optgroup> позволяет логически и визуально объединить элементы select-а:
<select> <optgroup label="Цвета"> <option>Красный</option> <option>Зеленый</option> <option>Белый</option> </optgroup> <optgroup label="Порядок"> <option>Первый</option> <option>Второй</option> <option>Третий</option> </optgroup> </select>
Пример:
КрасныйЗеленыйБелыйПервыйВторойТретий
Тег <acronym>
Тег <acronym> позволяет дать слову или группе слов всплывающую подсказку. Подсказка из атрибута title всплывает при наведении мыши на слово заключенное в тег <acronym>:
<acronym title="Командный вид спорта, в котором целью является забить мяч в ворота соперника ногами или другими частями тела (кроме рук) большее, чем команда соперника количество раз">Футбол</acronym> очень популярен в мире.
Пример: Футбол очень популярен в мире.
Тег <address>
Как видно из названия, этот тег семантически выделяет адреса на странице. Адрес выделяется курсивом, что тоже легко меняется с помощью стилей:
<address>г. Арзамас, ул. Гагарина, д. 47, кв. 54</address>
Теги <ins> и <del>
Эти теги позволяют семантически выделить, что было до изменения на сайте и что стало после. Текст, заключенный в тег <del> зачеркивается, а заключенный в <ins> — подчеркивается:
<del>Было</del> <ins>Стало</ins>
Пример: Было Стало
Тег <label>
Этот тег нужно(!) использовать во всех формах. С помощью этого тега задаются метки элементам формы. Иными словами, при клике мышью на текст в теге <label> переводится фокус к соответствующему элементу формы, что существенно упрощает навигацию по форме. Например, этот тег просто незаменим в голосовалках:
<form action="#"> <h6>А Вы любите спать?</h6> <input type="radio" /> <label for="id1">Да</label> <br /> <input type="radio" /> <label for="id2">Нет</label> <br /> <input type="radio" /> <label for="id3">Я люблю есть</label> </form>
Пример:
В данном примере не нужно мышкой целиться в radio-инпут, теперь чтобы выбрать нужный вариант ответа, достаточно нажать на сам текст, заключенный в <label>.
Тег <fieldset>
Тег <fieldset> логически группирует элементы формы. С помощью тега <legend> можно задать название группе. Визуально группа выделяется рамкой вместе с меткой:
<form action="#">
<fieldset>
<legend>Ваш пол</legend>
<input type="radio" />
Мужской
<input type="radio" />
Женский
</fieldset>
</form>Пример:
Тег <abbr>
Тег <abbr> похож на тег <acronym>, только используется для аббревиатур
<abbr title="Football Club Rubin Kazan">FCRK</abbr> number one.
Пример: FCRK number one.
Атрибут rel
Этот атрибут можно ставить в любые теги (хотя W3C с этим не согласится), что очень полезно при обращении, например, через ява скрипт ко всем тегам с определенным атрибутом:
<a href="picture.png" rel="show">Увеличить картинку</a>
Тут, например, можно скриптом взять все ссылки с атрибутом rel=»show» и повесить на них функцию по показу большой картинки.
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 2.0+ | 1.3+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <abbr> указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
Браузеры никак не выделяют текст внутри <abbr>, за исключением Opera до версии 15, которая добавляет к тексту пунктирное подчёркивание.
Синтаксис
<abbr>Текст</abbr>Атрибуты
- title
- Добавляет всплывающую подсказку к тексту, в которой можно дать расшифровку аббревиатуры.
Также для этого тега доступны глобальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<title>Тег ABBR</title>
<meta charset="utf-8">
<style>
abbr {
border-bottom: 1px dashed red; /* Пунктирное подчеркивание текста */
color: #000080; /* Темно-синий цвет текста */
}
</style>
</head>
<body>
<p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr>
обозначается протокол, с помощью которого любые внешние программы взаимодействуют
с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом
языке программирования и результат их действия выводить в виде веб-страницы.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки при наведении курсора мыши на текст аббревиатуры
Браузеры
Браузер Internet Explorer до 6 версии включительно не поддерживает тег <abbr>, взамен рекомендуется использовать тег <acronym>.
| ISO-8859-1 | ISO8859-1 | Западно-европейская Latin-1. |
| ISO-8859-5 | ISO8859-5 | Редко используемая кириллическая кодировка (Latin/Cyrillic). |
| ISO-8859-15 | ISO8859-15 | Западно-европейская Latin-9. Добавляет знак евро, французские и финские буквы к кодировке Latin-1 (ISO-8859-1). |
| UTF-8 | 8-битная Unicode, совместимая с ASCII. | |
| cp866 | ibm866, 866 | Кириллическая кодировка, применяемая в DOS. |
| cp1251 | Windows-1251, win-1251, 1251 | Кириллическая кодировка, применяемая в Windows. |
| cp1252 | Windows-1252, 1252 | Западно-европейская кодировка, применяемая в Windows. |
| KOI8-R | koi8-ru, koi8r | Русская кодировка. |
| BIG5 | 950 | Традиционный китайский, применяется в основном на Тайване. |
| GB2312 | 936 | Упрощенный китайский, стандартная национальная кодировка. |
| BIG5-HKSCS | Расширенная Big5, применяемая в Гонконге. | |
| Shift_JIS | SJIS, SJIS-win, cp932, 932 | Японская кодировка. |
| EUC-JP | EUCJP, eucJP-win | Японская кодировка. |
| MacRoman | Кодировка, используемая в Mac OS. | |
| » | Пустая строка активирует режим определения кодировки из файла скрипта (Zend multibyte), default_charset и текущей локали (см. nl_langinfo() и setlocale()) в указанном порядке. Не рекомендуется к использованию. |