Как сделать текст неразрывным в HTML

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

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

Использование неразрывного пробела

Самый простой и распространенный способ сделать текст неразрывным в HTML — использовать неразрывный пробел  . Вот как это работает:

<p>Сегодня температура воздуха составляет 30&nbsp;градусов.</p>

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

Использование тега <nobr>

Еще один способ сделать текст неразрывным — использовать тег <nobr>. Однако стоит заметить, что этот тег является устаревшим и не рекомендуется к использованию в современной веб-разработке. Вот пример использования тега <nobr>:

<p>Сегодня температура воздуха составляет <nobr>30 градусов</nobr>.</p>

Использование CSS

Еще один способ сделать текст неразрывным — использовать CSS свойство white-space. Вот как это сделать:

<p style="white-space: nowrap;">Сегодня температура воздуха составляет 30 градусов.</p>

В этом примере мы используем свойство white-space со значением nowrap, чтобы текст в абзаце не переносился на новую строку.

На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.

Заключение

Теперь вы знаете три различных способа сделать текст неразрывным в HTML 😊. Напоминаем, что лучший и современный подход — использовать неразрывный пробел   или свойство CSS white-space. Удачи в веб-разработке!