Избегаем переноса строки в HTML элементах: тег <td>

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

Для того чтобы не допустить переноса строк в HTML, примените CSS-свойство white-space: nowrap;, которое обеспечит расположение элементов в рамках одной строки. Возможно также использование свойств display: inline; или display: inline-block; для достижения схожего результата.

Пример:

/* Все элементы находятся рядом, как части 'inline' коллектива. */
.inline-elements { display: inline; }

<span class="inline-elements">Текст1</span><span class="inline-elements">Текст2</span>

Таким образом, Текст1 и Текст2 объединяются в цепочку без прерываний. Свойство nowrap подходит для сядежащих секций содержимого, в то время как inline – для отдельных элементов.

CSS-решение: свойства white-space и display

Использование CSS-свойства: white-space

Свойство white-space: nowrap; в CSS помешает тексту и инлайновым элементам переходить на следующую строку. Это идеальное решение для навигационных меню и кнопок, где нужно сохранить целостность элементов. Это свойство поддерживается всеми современными браузерами.

Подробнее об этом расскажет наш спикер на видео

Применение стиля инлайн-отображения

Свойства display: inline; или display: inline-block; позволят элементам сохранять конкретный порядок, как звенья в одной цепи. Это особенно полезно, когда требуется объединить текст и другие инлайновые элементы, такие как иконки или кнопки. Эта простая, но эффективная техника обеспечивает последовательность размещения элементов.

Устаревшие решения: nobr и nowrap

Элемент nobr, несмотря на то, что он нестандартный и устаревший, вместе с бывшим широкоиспользуемым nowrap по-прежнему имеют широкую поддержку. nobr позволяет соединять текст или элементы в одну строку, тогда как nowrap пригоден в таблицах для тегов td для предотвращения разделения содержимого ячеек. Однако, рекомендуется прибегать к использованию CSS.

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

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

До:       [Магнит] [Магнит] [Магнит]
          Между магнитами пробелы, которые позволяют переноситься на новую строку

\Щёлк** После активации свойства white-space: nowrap; магниты как бы связаны неразрывной связью.

После:    [МагнитМагнитМагнит]
          Магниты прочно соединены между собой, исключая всевозможные переносы

За дружеским ужином на диване — элементы стыкуются вплотную, создавая непрерывное соединение.

Расширение арсенала: элементы span, невидимые соединители, управление переполнением и пустые элементы

Элемент span: скромная, но значимая поддержка

Используя <span> с классом .nobr и добавление CSS-свойства white-space: nowrap;, вы получите элемент, который обеспечит сохранение требуемых блоков по одной линии.

Корректировка промежутков: невидимый соединитель

Для точного контроля зазоров применяется невидимый соединитель (‍). Он служит неким незаметным замыкателем символов или элементов, предотвращающим переносы строк.

Управление переполнением: в рамках приличия

В сфере веб-дизайна размеры имеют решающее значение. Свойства width и overflow могут контролировать, как контент будет распределяться. Ограничив ширину, вы сдерживаете контент на одной строке, при этом переполнение можно скрыть или сделать прокручиваемым.

Обработка пустых элементов или иконок

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

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

1. white-space – CSS: Каскадные таблицы стилей | MDN — подробное рассмотрение влияния свойства white-space на перенос строк.
2. css – 100vw вызывает горизонтальное переполнение, но только если их более одного? – Stack Overflow — обсуждение поведения white-space с nowrap и проблем, связанных с ним.
3. Модель визуального форматирования – W3 — официальная спецификация свойства display от W3C.
4. Всё о свойствах float | CSS-Tricks – CSS-Tricks — руководство по использованию свойства float для предотвращения переносов строк.
5. css float – Что делает CSS-правило "clear: both"? – Stack Overflow — объяснение правила "clear: both", отвечающего за переносы строк.
6. Что происходит, когда вы создаете контейнер Flexbox Flex? – Smashing Magazine – обзор flexbox как современного инструмента для предотвращения переносов строк.
7. Полное руководство по Flexbox | CSS-Tricks – CSS-Tricks — исчерпывающее руководство по flexbox, включая избегание переносов строк при помощи гибких контейнеров.