Как предотвратить обертывание встроенных блоков div?

Опубликовано: 5 Января, 2022

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

Мы можем предотвратить упаковку встроенных блоков div, добавив подходящие классы Bootstrap. Разберемся в этом на примере:

Пример 1. Нам необходимо отобразить несколько таблиц, которые были разложены с использованием подходящих классов строк и столбцов начальной загрузки. Проблема будет в том, что если в одной строке есть несколько таблиц, то Bootstrap завершит строку и переместит следующую таблицу в следующую строку, если она не помещается в строку (это происходит, если размер экрана небольшой). Но мы хотим, чтобы эти таблицы находились в одной строке для всех размеров экрана (т.е. мы не хотим, чтобы элементы встроенного блока переходили в следующую строку).

Подход: для этого мы должны написать тег table вместе с классом Bootstrap, который называется table-responsive для каждой таблицы. Этот класс делает все таблицы адаптивными, так что они находятся в одном месте для всех типов экранов (от xs-lg), и если размер экрана небольшой, чтобы соответствовать таблицам, таблицы автоматически получают горизонтальную полосу прокрутки, и пользователь может посмотрите на дополнительное содержимое таблицы, прокрутив вправо. Это также позволяет избежать наложения таблиц и делает страницу чистой.

Синтаксис:

<div class="table-responsive">

Пример:

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href =
< title >
Prevent inline-block
divs from wrapping
</ title >
< style >
div {
display: inline-block;
}
</ style >
</ head >
< body >
< div class = "row" >
< div class = "col-6" >
< div class = "table-responsive" >
< table class = "table table-stripped" >
<!-- This is to make the table
have same colors for
alternate rows-->
< thead class = "thead-dark" >
< tr >
< th >header1</ th >
< th >header2</ th >
< th >header3</ th >
< th >header4</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >data1</ td >
< td >data2</ td >
< td >data3</ td >
< td >data4</ td >
</ tr >
< tr >
< td >data1</ td >
< td >data2</ td >
< td >data3</ td >
< td >data4</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
< div class = "col-6" >
< div class = "row" >
< div class = "table-responsive" >
< table class = "table table-stripped" >
< thead class = "thead-dark" >
< tr >
< th >header1</ th >
< th >header2</ th >
< th >header3</ th >
< th >header4</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >data1</ td >
< td >data2</ td >
< td >data3</ td >
< td >data4</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
< div class = "row" >
< div class = "table-responsive" >
< table class = "table table-stripped" >
< thead class = "thead-dark" >
< tr >
< th >header1</ th >
< th >header2</ th >
< th >header3</ th >
< th >header4</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >data1</ td >
< td >data2</ td >
< td >data3</ td >
< td >data4</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ div >
< div class = "row" >
< div class = "col-6" >
< div class = "table-responsive" >
< table class = "table table-stripped" >
< thead class = "thead-dark" >
< tr >
< th >header1</ th >
< th >header2</ th >
< th >header3</ th >
< th >header4</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >data1</ td >
< td >data2</ td >
< td >data3</ td >
< td >data4</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
< div class = "col-6" >
< div class = "table-responsive" >
< table class = "table table-stripped" >
< thead class = "thead-dark" >
< tr >
< th >header1</ th >
< th >header2</ th >
< th >header3</ th >
< th >header4</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >data1</ td >
< td >data2</ td >
< td >data3</ td >
< td >data4</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
</ body >
</ html >

Важно помнить, что в адаптивных таблицах используется overflow-y: hidden , которая отсекает любое содержимое, выходящее за пределы нижнего или верхнего края таблицы. Итак, если размер вашей таблицы велик и может выходить за пределы нижней части экрана, лучше добавить overflow-y: auto внутри тега <style>.

В приведенном выше коде мы использовали https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css внутри тега <head>, чтобы иметь возможность использовать классы Bootstrap, чтобы упростить нашу жизнь. Обратите внимание, что мы также добавили к каждой таблице класс «table table-responsive», чтобы предотвратить ее упаковку.

Выход:
Для нормального размера экрана:

Для экрана маленького размера:

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

Подход: сначала мы берем тег <div> и даем ему произвольное имя для применения свойств CSS. Оба блока здесь заполнены текстом. white-space: nowrap; свойство класса «a», которое сохраняет строку текста в той же строке, даже если размер экрана небольшой.

Синтаксис:

 белое пространство: nowrap;

Затем мы применяем white-space: normal; что по умолчанию для «пробела». Это отображает текст на нескольких строках в зависимости от размера экрана.

Синтаксис:

 пробел: нормальный;

Пример:

<!DOCTYPE html>
< html >
< head >
< title >
How to prevent inline-block
divs from wrapping ?
</ title >
< style >
.a {
white-space: nowrap;
}
.b {
white-space: normal;
}
</ style >
</ head >
< body >
< h1 >The white-space Property</ h1 >
< h2 >white-space: nowrap:</ h2 >
< div class = "a" >
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages presentable. CSS
allows you to apply styles to
web pages. More importantly,
CSS enables you to do this
independent of the HTML that
makes up each web page.
</ div >
< h2 >white-space: normal:</ h2 >
< div class = "b" >
Cascading Style Sheets, fondly
referred to as CSS, is a simply
designed language intended to
simplify the process of making
web pages presentable. CSS
allows you to apply styles to
web pages. More importantly,
CSS enables you to do this
independent of the HTML that
makes up each web page.
</ div >
</ body >
</ html >

Выход:

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