Предотвращение переноса строк в inline-block div в CSS

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

Если вы хотите, чтобы блоки inline-block всегда оставались в одной линии, установите для контейнера свойство white-space: nowrap;, а для каждого блока — display: inline-block;:

.container { white-space: nowrap; } // настроим контейнер так, чтобы дочерние элементы не переносились на новую строку
.div { display: inline-block; } // блоки выстроятся в ряд, без переноса

Таким образом, элемент .container удерживает внутри себя блоки .div на одной линии, не допуская их переноса на следующую строку.

Управление переполнением

Когда вы используете white-space: nowrap;, чтобы контролировать переполнение контента, добавьте свойство overflow:

.container { white-space: nowrap; overflow: hidden; } // обеспечиваем оставание содержимого в пределах контейнера

Свойство overflow: hidden; не позволяет содержимому выходить за пределы контейнера и нарушать макет. В случае необходимости прокрутки используйте overflow: auto;, чтобы добавить полосы прокрутки.

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

Вообразите блоки inline-block как акробатов, которые должны выступать вместе, не взаимодействуя друг с другом и не падая со сцены:

Сцена выступления: [🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️] – блоки inline-block на своих местах

Для поддержания баланса и порядка:

.stage { white-space: nowrap; } // поддерживает акробатов на сцене во время выступления
.dancer { display: inline-block; } // акробаты занимают стабильные позиции

Выступление продолжается плавно и без нарушений:

До: [🤸‍♀️🤸‍♀️🤸‍♀️|🤸‍♀️🤸‍♀️] – акробаты рискуют упасть
После: [🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️] – выступление проходит слаженно

Варианты решения: Flexbox и Float

Вместо white-space: nowrap; вы можете использовать flexbox и float для более продвинутого управления размещением блоков:

.flex-container {
    display: flex;
    flex-wrap: nowrap;
} // Flexbox делает расположение элементов гибким и эффективным

.float-div { float: left; }
.clearfix::after {
    content: "";
    clear: both;
    display: table;
} // Float работает как позволяющая "плавать" разметка

Эти технологии предоставляют больше опций для управления макетом.

Отзывчивый дизайн без потери ширины

Использование white-space: nowrap; не исключает автоматического распределения ширины блоков inline-block. Они могут занимать столько горизонтального пространства, сколько доступно, обеспечивая отзывчивый поток контента.

Баланс переполнения и области просмотра

Управление переносом может привести к появлению содержимого, нарушающего размеры области просмотра. Если возникает проблема с нежелательной горизонтальной прокруткой, установите overflow: auto; для контейнера .container, чтобы при необходимости добавлять скроллбары.

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

1. Полный гид по Flexbox | CSS-Tricks
2. Гибкая боксовая модель CSS – CSS: Cascading Style Sheets | MDN
3. Модуль уровня 1 Гибкой боксовой модели CSS
4. html – Как центрировать flex-контейнер, но выровнять flex-элементы влево – Stack Overflow
5. Flexbox | Codrops
6. Дизайн удобной для поддержки гибкой круговой диаграммы на CSS и SVG — Smashing Magazine
7. "flexbox" | Can I use... Таблицы поддержки для HTML5, CSS3 и др.