Как поставить неразрывный пробел в html
Перейти к содержимому

Как поставить неразрывный пробел в html

  • автор:

Пробел HTML

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

Этопредложениенеразбитопословамиегонельзяперенестинановуюстрокупословам

Это предложение разбито по словам и его нельзя перенести на новую строку по словам

Это предложение разбито по словам и его можно перенести на новую строку по словам

Согласно техническим правилам набора текста не допускается при переносе на новую строку отделять или разделять:

Длинный пробел

Длина пробела определяется свойством word-spacing .

  

Слово слово слово

Слово слово слово

Если два и более пробела идут подряд и не являются неразрывными, то они показываются как один. Управлять этим поведением можно с помощью свойства white-space . У тега по умолчанию white-space имеет значение pre и моноширинный шрифт.

  

Слово слово слово

Слово          слово          слово

Слово слово слово Слово слово слово

Если строка начинается с пробелов, которые не являются неразрывными, то они игнорируются. Отступ/выступ первой строки в абзаце можно установить с помощью свойства text-indent .

  

Cлово слово слово

         Cлово слово слово

Cлово слово слово

  1. код менее читабельный,
  2. код сложнее корректировать,
  3. код больше, чем при использовании свойств CSS.

Табуляция в HTML

— это символ пробела, который может сужаться или растягиваться дабы выровнять текст в строках. Табуляцию, как правило, печатает кнопка клавиатуры Tab . В HTML обозначается символом

Действие табуляции можно увидеть, лишь когда свойство white-space имеет значения pre или pre-wrap . У тега по умолчанию white-space: pre; и моноширинный шрифт.

  
Длиннющее слово 9 пробелов Очень длинное слово 4 пробела Слово 30 пробелов
Длиннющее слово 1 пробел Очень длинное слово 1 пробел Слово 4 пробела

Большое число табуляции следует применять с осторожностью, так как при уменьшении ширины всё расплывается. Доработанный вариант выглядит так.

 div < max-width: 50em; margin: 0 auto; padding: 1em; white-space: pre-wrap; background: whitesmoke; > span < border-bottom: 1px dotted #999; > 
ЧАСТЬ ПЕРВАЯ 3 Глава 1. Никогда не разговаривайте с неизвестными 5 Глава 2. Понтий Пилат 21 Глава 3. Седьмое доказательство 52 Глава 4. Погоня 58 Глава 5. Было дело в Грибоедове 67 Глава 6. Шизофрения, как было и сказано 82

tab-size

ширина символа табуляции. Целое число без единицы измерения определяет количество пробелов в табе initial 8 inherit наследует значение родителя unset наследует значение родителя

Слово слово слово

  
Слово слово слово

Способ применения неразрывного пробела без ширины ⁠

Скрипт меняет сочетание символов на картинку или что-то иное (см. Вайбер, WhatsApp и т. п.). Можно обойти действие скрипта, поместив между ними знак неразрывного пробела без ширины.

  • Отступы в тексте CSS
  • Пробел между строками (свойство line-height )
  • Другие символы HTML
  • Убрать пробел между inline-block-элементами
  • Перенести inline-элементы без пробелов на новую строку
  • Классы через пробел в CSS

Неразрывный пробел в HTML (  |   | u+00a0)

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

Обозначения

# Название по-русски Название по-английски Вид Мнемоника HTML-код Unicode
1 Неразрывный пробел No-Break Space     u+00a0

Пример

Для примера возьмём некоторое одинаковое количество английских букв «a», разделённых в первом случае обычными пробелами, а во втором — неразрывными, и поместим их в ограниченные по ширине блоки:

Текст с неразрывными пробелами автоматически обрезается или отображается за границами блока, в зависимости от его (блока) свойств. В первом случае блоку было определено свойство overflow со значением hidden , а во втором оно было опущено, так как по умолчанию его значение установлено в visible .

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

Пример

Добрый день! Имеется конструкция: длинный текст (5 –10 Января 2015 г.) . Несмотря на неразрывные пробелы, строка рвется рядом с тире и между цифрой года и сокращением «г.»: Можно ли как-то от этого избавиться?

Отслеживать
задан 3 янв 2015 в 11:58
2,525 1 1 золотой знак 15 15 серебряных знаков 30 30 бронзовых знаков
CSS white-space: nowrap;
3 янв 2015 в 12:02
вы хотите одной строкой?
3 янв 2015 в 12:06

@Deonis, а если мне надо, что бы слова переносились, а не были сплошной строкой и только определенная пара слов в строке была связкой? Ваш метод тут явно не подходит, читайте зачем нужен неразрывный пробел.

3 янв 2015 в 12:19

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

3 янв 2015 в 12:23

@Alex Krass, вы мне предлагаете почитать, зачем нужен неразрывный пробел? Давайте вместе мочитаем [в официальной документации][1]. Надеюсь, что переводить не нужно? А теперь объясните мне, почему мой метод не подходит, если человек вместо всех пробелов, поставил неразрывный пробел. Для вас это окажется удивительным, но для меня очевидно, что в этой строке (всей строке) — переносов быть не должно. Если же ТС хотел какой-либо другой эффект, то это нужно было обозначить в вопросе. [1]:w3.org/MarkUp/html3/specialchars.html

Пробел в HTML

Бывают случаи, когда не хочется менять стили ради какого-то одного элемента, или необходимо вставить несколько пробелов в тексте из соображений эстетики или стилистики форматирования текста. И тут встает вопрос: «Как сделать пробел в HTML, чтобы текст красиво отображался, и при этом избежать избыточности кода?» Для этого рассмотрим виды пробелов и примеры их использования в HTML-коде.

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

В случаях, когда нужно не отрывать части текста друг от друга, поможет неразрывный пробел, код которого выглядит следующим образом:

Это так называемый, «non breaking space».

Примеры использования неразрывного пробела:

Е. Велтистов
11 тыс. рублей

Тонкий пробел

Код пробела HTML, который мы рассмотрели выше, является повсеместным. Но бывают случаи, когда обычный пробел оказывается слишком «большим». Тогда на смену ему приходит тонкий пробел. Это пробел, ширина которого составляет четверть кегля используемого шрифта. Обозначается тонкий пробел следующим образом:

и используется, по большей части, для разбиения разрядов чисел, например, «15 000 000 долларов» стоит записать так:

15 000 000 долларов

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

Другие типы пробелов в языке HTML

Помимо наиболее актуальных видов, что мы рассмотрели выше, существуют и другие.

  •   — пробел длины буквы N;
  •   — пробел длины буквы M;
  • ‌ — несоединяющий символ нулевой длины;
  • ‍ — соединяющий символ нулевой длины.

Примечание: Если вам нужно поставить несколько пробелов подряд, обрамите текст тегом :

Конструктор сайтов «Нубекс»

Пробел при помощи CSS

Вариант создания табуляции (отступа) с помощью CSS можно решить с помощью следующего приёма:

 Конструктор сайтов «Нубекс»

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

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