Получить профессию в Skypro
Предотвращение переноса строки после тире в HTML и CSS
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для того чтобы не допустить переноса текста после дефиса, примените свойство CSS white-space: nowrap:
/* Предотвращает перенос слов */
.no-break {
white-space: nowrap;
}Передайте этот наглядный класс HTML-элементам на которые хотите применить это свойство:
<!-- Неразрывный дефис -->
<span class="no-break">слово-вслед</span>При помощи этого CSS-правила вы обеспечите неразрывность вашего дефиса.
К тому же, символ ‑ используется в роли неразрывного дефиса, чтобы предотвратить разделение дефиса:
<!-- Неразрывный дефис в словосочетании "здесь-там" -->
<p>Здесь‑там</p>Воспользуйтесь ⁠ для невидимой защиты от нежелательных переносов, блокируя разделение возле дефиса и других символов. Убедитесь в корректной работе в разных браузерах для достоверности результата.
Альтернативные методы с объяснениями
HTML-сущность: неразрывный дефис
Применяйте HTML-сущность ‑, если требуется обеспечить, что дефис останется неразделимым:
<!-- Дефис упорно остаётся на своём месте -->
Оставайся‑здесь навсегда.Объединение символов для предотвращения переносов
Чтобы убедиться, что все символы в наборе останутся вместе, окружите их соединяющим невидимым символом, ⁠:
<!-- Вагоны поезда неразрывно соединены -->
Соединение⁠-⁠слов.Отказываемся от устаревших тегов
Устаревший тег <nobr> лучше забыть. Вместо него примените CSS:
<!-- Нет <nobr>, да CSS -->
Пользуйтесь вместо:
<nobr>устаревший-текст</nobr> <!-- Имеет историческую ценность, но не применим -->Корректное объявление символов и DOCTYPE
В начале HTML-документа определите корректный DOCTYPE и кодировку символов:
<!-- Вход в мир элегантных веб-страниц -->
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">Совместимость с браузерами
Проверьте корректность выполнения вашего решения в различных браузерах:
<!-- Браузеры ведут себя по-разному -->
Проверьте в Chrome, Firefox, Safari, Edge и других.Визуализация
Избегание переносов после дефиса напоминает прицепленный в одну цепь поезд:
🚂-🚃🚃🚃 (Поезд целиком)А вот что происходит с дефисом без ограничений:
Дефис решил отдохнуть:
🚂-
🚃🚃🚃Эффект от запрета переноса на примере:
С 'white-space: nowrap' наш дефис всегда с вагонами:
🚂-🚃🚃🚃Неразрывный дефис ‑ также вызван в помощь нам:
<!-- Дефис надёжно удерживает слова -->
Символ ‑ "здесь-там" останется вместе.
Без ‑ может получиться "здесь-
там".Это важнейшее условие для создания качественного веб-контента с разнообразной типографикой.
Дополнительное изучение
В сложных ситуациях использования, например, с динамичным текстом или текстом, созданным пользователями, потребуются дополнительные скрипты или использование регулярных выражений.
Полезные материалы
- white-space – CSS: Каскадные таблицы стилей | MDN
- Обработка длинных слов и URL (Принудительные переносы, переносы по слогам и др.) | CSS-Tricks
- Тестовый редактор W3Schools
- CSS Text Module Level 4
- hyphens – CSS: Каскадные таблицы стилей | MDN
- Трюк с единицами viewport на мобильных устройствах | CSS-Tricks
- Настройка текста в вебе по базовой сетке – A List Apart