Предотвращение переноса строки после тире в HTML и CSS

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для того чтобы не допустить переноса текста после дефиса, примените свойство CSS white-space: nowrap:

CSS

Скопировать код

/* Предотвращает перенос слов */
.no-break {
  white-space: nowrap;
}

Передайте этот наглядный класс HTML-элементам на которые хотите применить это свойство:

HTML

Скопировать код

<!-- Неразрывный дефис -->
<span class="no-break">слово-вслед</span>

При помощи этого CSS-правила вы обеспечите неразрывность вашего дефиса.

К тому же, символ ‑ используется в роли неразрывного дефиса, чтобы предотвратить разделение дефиса:

HTML

Скопировать код

<!-- Неразрывный дефис в словосочетании "здесь-там" -->
<p>Здесь&#8209;там</p>

Воспользуйтесь ⁠ для невидимой защиты от нежелательных переносов, блокируя разделение возле дефиса и других символов. Убедитесь в корректной работе в разных браузерах для достоверности результата.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Альтернативные методы с объяснениями

HTML-сущность: неразрывный дефис

Применяйте HTML-сущность ‑, если требуется обеспечить, что дефис останется неразделимым:

HTML

Скопировать код

<!-- Дефис упорно остаётся на своём месте -->
Оставайся&#8209;здесь навсегда.

Объединение символов для предотвращения переносов

Чтобы убедиться, что все символы в наборе останутся вместе, окружите их соединяющим невидимым символом, ⁠:

HTML

Скопировать код

<!-- Вагоны поезда неразрывно соединены -->
Соединение&#8288;-&#8288;слов.

Отказываемся от устаревших тегов

Устаревший тег <nobr> лучше забыть. Вместо него примените CSS:

HTML

Скопировать код

<!-- Нет <nobr>, да CSS -->
Пользуйтесь вместо:
<nobr>устаревший-текст</nobr> <!-- Имеет историческую ценность, но не применим -->

Корректное объявление символов и DOCTYPE

В начале HTML-документа определите корректный DOCTYPE и кодировку символов:

HTML

Скопировать код

<!-- Вход в мир элегантных веб-страниц -->
<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">

Совместимость с браузерами

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

plaintext

Скопировать код

<!-- Браузеры ведут себя по-разному -->
Проверьте в Chrome, Firefox, Safari, Edge и других.

Визуализация

Избегание переносов после дефиса напоминает прицепленный в одну цепь поезд:

plaintext

Скопировать код

🚂-🚃🚃🚃 (Поезд целиком)

А вот что происходит с дефисом без ограничений:

Markdown

Скопировать код

Дефис решил отдохнуть:
🚂-
🚃🚃🚃

Эффект от запрета переноса на примере:

Markdown

Скопировать код

С 'white-space: nowrap' наш дефис всегда с вагонами:
🚂-🚃🚃🚃

Неразрывный дефис ‑ также вызван в помощь нам:

plaintext

Скопировать код

<!-- Дефис надёжно удерживает слова -->
Символ &#8209; "здесь-там" останется вместе.
Без &#8209; может получиться "здесь-
там".

Это важнейшее условие для создания качественного веб-контента с разнообразной типографикой.

Дополнительное изучение

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

Полезные материалы

Свежие материалы

История веб-разработки: от HTML до современных фреймворков

30 августа 2024

Работа с полями структур в C

30 августа 2024

Разработка консольных приложений на C

30 августа 2024