Чтобы пробел перед знаком пунктуации не отделялся от предшествующего слова на веб-странице, замените обычный пробел на неразрывный или заключите эту пару в небольшой CSS-элемент span с запретом переноса. На Mac проверьте результат при разной ширине с помощью локального HTML-файла.

Это руководство предназначено для тех, кто редактирует текст или HTML-код страницы на Mac, например подпись плитки с названием «Бета :» в узкой карточке. Нужно сохранить видимый пробел и не допустить, чтобы двоеточие само переносилось на следующую строку. В примерах пробел намеренно сохранён.

Какой способ выбрать?

Сначала решите, должно ли правило о пробеле относиться к самому тексту или к оформлению страницы. В Unicode U+00A0 NO-BREAK SPACE определён как неразрывный аналог обычного пробела, а U+202F NARROW NO-BREAK SPACE — как его более узкий вариант. Они дают два разных варианта видимого интервала. Стандарт Unicode, глава 6

Ситуация при редактировании С чего начать Что проверить
Можно изменить текст и нужен пробел обычной ширины Замените обычный пробел на U+00A0 В сохранённом тексте остался неразрывный символ
Нужен намеренно более узкий пробел Используйте U+202F Результат подходит для фактического шрифта страницы
Нужно сохранить обычный пробел в тексте Примените white-space: nowrap к элементу span, содержащему всю пару Элемент span включает слово, пробел и знак пунктуации
Можно только просматривать страницу Исправьте текст в редактируемом исходном коде или попросите ответственного за страницу внести изменение Локальный эксперимент не изменяет исходную страницу

В HTML-коде укажите Beta :. В таблице символьных ссылок WHATWG   соответствует U+00A0. Замените существующий пробел — не оставляйте обычный пробел перед ссылкой. Стандарт HTML: именованные символьные ссылки

Чтобы задать правило оформления, заключите Beta : во встроенный элемент span и примените к нему white-space: nowrap. Текст вокруг него должен переноситься как обычно. В документации MDN указано, что white-space управляет как обработкой пробелов, так и переносами. MDN: white-space

Практический выбор зависит от того, какой объём текста нужно сохранить вместе. В этом примере защитите только Beta :. Ограничивать перенос для всей подписи Tile Alpha Beta : Next tile было бы излишне. Начните с наименьшего фрагмента, который выражает нужную связь.

Как провести локальную проверку с помощью TextEdit

Перед изменением существующей страницы создайте отдельный тестовый файл. В документации Apple описано, как создать HTML-файл в TextEdit в режиме обычного текста, сохранить его с расширением .html и выбрать Use .html в появившемся запросе. Работа с HTML-документами в TextEdit на Mac

  1. Откройте TextEdit и выберите File > New.
  2. Выберите Format > Make Plain Text.
  3. Вставьте полный пример, приведённый ниже.
  4. Выберите File > Save и назовите файл punctuation-test.html.
  5. Если появится запрос, выберите Use .html.
  6. В Safari выберите File > Open File и откройте сохранённый файл.

Это полноценный автономный HTML-документ. Для него не нужны библиотеки, установка программ или подключение к сети. Во всех трёх карточках используется одинаковый искусственный текст, но пробел перед двоеточием оформлен по-разному.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

Преобразование символьной ссылки в примере проверили с помощью парсера: &nbsp; соответствует U+00A0. При подготовке примера отображение в браузере не проверялось. Используйте сравнение ниже, чтобы проверить вёрстку в браузере на Mac.

Сравнивайте переносы, а не один снимок экрана

Иллюстративное значение ширины 14ch — отправная точка, а не гарантированный порог переноса. Замените его на 10ch, сохраните файл и перезагрузите страницу, затем попробуйте 18ch. Найдите ширину, при которой в карточке с обычным пробелом двоеточие отделяется от Beta. В двух вариантах с защитой ожидается, что Beta и двоеточие останутся вместе, а остальные слова смогут переноситься.

Если сначала все три карточки выглядят одинаково, это не доказывает, что варианты пробела равнозначны. Возможно, для пары просто достаточно места. Меняйте ширину, пока нужная граница не окажется в конце строки, затем увеличьте размер текста и повторите проверку.

Чтобы снова открыть файл в TextEdit, выберите File > Open, укажите файл, выберите Show Options и при необходимости включите Ignore rich text commands. Apple также описывает настройку Display HTML files as HTML code instead of formatted text. Эти параметры позволяют редактировать исходный код напрямую. Инструкции Apple по HTML в TextEdit

Почему неразрывный пробел может не сработать?

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

На странице символьная ссылка отображается буквально

Если страница показывает символы &nbsp;, значит, введённая строка была обработана как текст, а не разобрана как HTML-символьная ссылка. В поле исходного HTML-кода укажите Beta&nbsp;:. В обычное текстовое поле вставьте сам неразрывный символ.

То же различие действует в JavaScript. Присваивание строки через textContent создаёт текст, но не разбирает HTML-ссылки. Строка JavaScript может содержать сам символ в виде "Beta\u00A0:". Также не присваивайте textContent целому форматированному абзацу только ради исправления одного пробела: при этом заменяются все его дочерние элементы. MDN: Node.textContent

Правило CSS разрешает чрезмерно свободный перенос

Проверьте наличие line-break: anywhere. В документации MDN указано, что это значение разрешает переносы вокруг типографских символьных единиц, игнорируя запреты, связанные с классами склеивания и соединителя слов. Поэтому дополнительный неразрывный символ нельзя считать безусловным переопределением этой настройки. MDN: line-break

Также проверьте overflow-wrap. Значение anywhere позволяет при необходимости разделить последовательность, которая иначе не переносилась бы, чтобы избежать переполнения. Такое аварийное поведение отличается от обычного переноса на пробеле. MDN: overflow-wrap

Используйте локальный элемент span с запретом переноса, если оформление требует сохранить короткую пару целиком. Проверьте, какое правило действительно применяется к этому элементу, особенно если в таблице стилей страницы есть более специфичные селекторы. Ограничьте область действия исправления, чтобы длинный текст в других местах продолжал переноситься как прежде.

Знак пунктуации находится в отдельном блоке вёрстки

Проверьте, является ли двоеточие обычным встроенным текстом или находится внутри inline-block либо другого атомарного встроенного элемента. W3C задаёт особые возможности переноса рядом с атомарными встроенными элементами, в том числе исключение для соседних неразрывных пробелов. Пробел рядом с таким блоком не равнозначен пробелу внутри непрерывного текстового фрагмента. CSS Text Module Level 3: подробности о переносе строк

Для этой простой подписи оставьте слово, пробел и знак пунктуации в одном обычном встроенном элементе span. Удалите явный <br> между ними, если нужен автоматический перенос: nowrap отключает мягкий перенос, но не устраняет принудительные разрывы. CSS Text Module Level 3: пробелы и переносы

Как сохранить шрифтовую обработку браузера и справиться с тесной вёрсткой?

Сохраняйте слово целиком, а не переносите отдельные буквы. W3C определяет, когда формирование текста должно продолжаться через границы встроенных элементов и когда такие изменения, как промежуточные отступы, рамки или выравнивание, требуют его прервать. Обычный встроенный элемент span помогает избежать ненужных границ форматирования. CSS Text Module Level 3: формирование текста через границы элементов

При этом остаётся физическое ограничение: для защищённой пары нужно достаточно места по горизонтали. Если контейнер становится уже, чем Beta :, сохранение пары вместе может привести к переполнению. Проверьте этот случай намеренно. Затем выберите способ изменить вёрстку, например расширить карточку или сократить подпись, вместо того чтобы скрывать затронутый текст. Поведение запрета переноса описано в определении white-space от W3C.

Нужна ли библиотека для переноса строк?

Для обычной веб-страницы — нет. Именованная библиотека linebreak вычисляет допустимые места переносов по Unicode; в её документации прямо сказано, что фактический выбор переносов оставлен программному обеспечению, которому известны доступная ширина и отображаемый размер текста. В README сейчас указана поддержка Unicode 13. Документация foliojs/linebreak

Это различие важно, если библиотека уже используется другим инструментом. Список возможных переносов не определяет, где браузер перенесёт сформированный текст. При редактировании этой страницы оставьте формирование шрифта и окончательную вёрстку браузеру, а нужное ограничение задайте с помощью символа или локального правила CSS.

Перед переносом исправления на страницу убедитесь в трёх вещах: пробел остаётся видимым, слово и знак пунктуации остаются вместе у конца строки, а окружающий текст по-прежнему может переноситься. Используйте неразрывный пробел, когда связь относится к самому тексту, или локальный элемент span с запретом переноса, когда она относится к оформлению. Повторно проверьте фактическую страницу на минимальной полезной ширине.

Источники