Как сделать в разметке неразрывный пробел?

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

Неразрывный пробел - это спецсимвол, который предотвращает разрыв строки между двумя словами. Это полезно в типографике для сохранения целостности фраз.

1. HTML Entity: Non-Breaking Space

Самый простой способ - использовать HTML-сущность.

<!-- Стандартный неразрывный пробел -->
<p>Виктор&nbsp;Петров</p>

<!-- Результат: 
Виктор и Петров всегда на одной строке,
текст не разорвётся между ними -->

<!-- Примеры -->
<p>Мобильный телефон:&nbsp;+7&nbsp;(999)&nbsp;123-45-67</p>
<p>Цена:&nbsp;1&nbsp;000&nbsp;000&nbsp;рублей</p>
<p>10&nbsp;км отсюда</p>

<!-- Несколько неразрывных пробелов -->
<p>Название&nbsp;&nbsp;&nbsp;программы</p> <!-- 3 неразрывных пробела -->

2. Варианты спецсимволов

<!-- Обычный пробел (разрывный) -->
<p>Виктор Петров</p>

<!-- Неразрывный пробел (non-breaking space) -->
<p>Виктор&nbsp;Петров</p>
<!-- Альтернативный синтаксис -->
<p>Виктор&#160;Петров</p>
<!-- Unicode синтаксис -->
<p>Виктор&#xA0;Петров</p>

<!-- Тонкий неразрывный пробел (thin non-breaking space) -->
<p>Виктор&#8239;Петров</p>
<!-- Узкий пробел, занимает меньше места -->

<!-- Неразрывный дефис (non-breaking hyphen) -->
<p>Санкт&#8209;Петербург</p>
<!-- Дефис, который не может быть разбит -->

3. JavaScript способ

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

// Способ 1: используя HTML Entity
function addNonBreakingSpace(str) {
  return str.replace(/ /g, ' '); // Заменить все пробелы
}

console.log(addNonBreakingSpace('Виктор Петров'));
// Результат: Виктор Петров

// Способ 2: используя Unicode символ
function addNonBreakingSpace(str) {
  const nbsp = '\u00A0'; // Unicode для  
  return str.replace(/ /g, nbsp);
}

// Способ 3: в элементе DOM
const element = document.querySelector('p');
element.textContent = 'Виктор\u00A0Петров';

// Способ 4: с помощью innerHTML
const div = document.createElement('div');
div.innerHTML = 'Виктор Петров';

4. React компоненты

import React from 'react';

// Способ 1: простой компонент
export function Name({ firstName, lastName }) {
  return (
    <span>
      {firstName}&nbsp;{lastName}
    </span>
  );
}

// Использование
<Name firstName="Виктор" lastName="Петров" />

// Способ 2: с использованием Unicode
export function Phone({ code, number }) {
  return (
    <span>
      +7\u00A0({code})\u00A0{number}
    </span>
  );
}

// Использование
<Phone code="999" number="123-45-67" />
// Результат: +7 (999) 123-45-67 (с неразрывными пробелами)

// Способ 3: хук для замены
function useNonBreakingSpace(text) {
  const nbsp = '\u00A0';
  return text.replace(/ /g, nbsp);
}

export function Title({ text }) {
  const formatted = useNonBreakingSpace(text);
  return <h1>{formatted}</h1>;
}

5. CSS способ

Можно управлять разрывом строк через CSS без изменения HTML.

/* Предотвратить разрыв строки внутри элемента */
.no-break {
  white-space: nowrap; /* Текст на одной строке */
}

/* Использование -->
<span class="no-break">Виктор Петров</span>
<!-- Виктор и Петров не разорвутся -->

/* Более гибкий подход - word-spacing */
.name {
  word-spacing: 9999px; /* Большое значение предотвращает разрыв */
}

/* Использование для конкретной фразы */
<span class="name">Виктор Петров</span>

/* Предотвратить разрыв только для определенных слов */
.no-orphans {
  widows: 2; /* Минимум 2 строки в конце блока */
  orphans: 2; /* Минимум 2 строки в начале блока */
}

6. Практические примеры

<!-- Имя с фамилией -->
<p>Автор: Александр&nbsp;Пушкин</p>

<!-- Дата и время -->
<p>15&nbsp;апреля&nbsp;2026&nbsp;г.</p>
<p>14:30&nbsp;UTC</p>

<!-- Телефон с кодом -->
<p>Звоните: +7&nbsp;(495)&nbsp;123-45-67</p>

<!-- Адрес -->
<p>Улица&nbsp;Пушкина,&nbsp;дом&nbsp;5</p>

<!-- Названия мест -->
<p>Город&nbsp;Москва</p>
<p>Озеро&nbsp;Байкал</p>
<p>Санкт‑Петербург</p>

<!-- Числа с единицами -->
<p>Расстояние: 100&nbsp;км</p>
<p>Вес: 5&nbsp;кг</p>
<p>Стоимость: 1&nbsp;000&nbsp;000&nbsp;₽</p>

<!-- Аббревиатуры -->
<p>Открыто: пн.—пт.&nbsp;с&nbsp;9:00 до&nbsp;18:00</p>

7. Для чего используется

const useCases = {
  'Имена и фамилии': 'Александр Пушкин',
  'Инициалы': 'И. С. Тургенев',
  'Названия мест': 'Санкт Петербург',
  'Дата и время': '15 апреля 2026 г.',
  'Телефон': '+7 (999) 123-45-67',
  'Числа с единицами': '1 000 м',
  'Сокращения': 'и т.д.',
  'Компании и бренды': 'ООО "Компания"',
  'Слова, которые не должны разорваться': 'Hello World'
};

8. Отличия от обычного пробела

// Обычный пробел (может разорваться)
<p>Очень длинное имя Александр Пушкин
может разорваться вот так:
Александр
Пушкин</p>

// Неразрывный пробел (НЕ разорвется)
<p>Очень длинное имя Александр&nbsp;Пушкин
БУДЕТ выглядеть так:
Александр Пушкин
(На отдельной строке оба слова)</p>

9. SEO и доступность

<!-- Неразрывные пробелы безопасны для SEO -->
<p>Компания&nbsp;Google Inc.</p>
<!-- Поисковики понимают, что это одна фраза -->

<!-- Screen readers читают это нормально -->
<p>Телефон:&nbsp;+7&nbsp;(999)&nbsp;123-45-67</p>
<!-- Будет прочитано как одна фраза -->

<!-- Для сложных фраз можно использовать ARIA -->
<p role="doc-subtitle">Главное&nbsp;руководство</p>

10. Важные замечания

const notes = {
  'Не переусложняй': 'Используй только где нужно',
  'Правильная кодировка': 'Убедись, что HTML с кодировкой UTF-8',
  'Копирование': 'При копировании на другие платформы могут быть проблемы',
  'Performance': 'Больше   значит больше символов в коде',
  'Альтернатива': 'Используй CSS white-space или flexbox вместо множества  ',
  'Типографика': 'В профессиональном дизайне неразрывные пробелы - стандарт',
  'Мобильные': 'На мобильных неразрывный пробел работает как обычный'
};

Итог

Неразрывный пробел делается через   или Unicode символ \u00A0. Используй его для имен, телефонов, дат и других фраз, которые не должны разрываться. Не переусложняй - применяй где действительно нужно для правильной типографики.