How to prevent inline-block divs from wrapping ?

08 Jun, 2020
The display: inline-block; is a layout property in CSS that does not add a line break after the element. As a result, the elements can sit next to each other. The major difference between display: inline; and display: inline-block; is that, display: inline-block; also allows us to set the width and height of the element.
We can prevent inline-block divs from wrapping by adding suitable Bootstrap classes. Let us understand this with the help of an example:
Example 1: We have to display multiple tables that have been laid out using suitable bootstrap row and column classes. The problem would be that if there are multiple tables in the same row then Bootstrap would wrap up the row and push the next table to the next row if it does not fit inline (This happens if the screen size is small). But we want these tables to be on the same row for all screen sizes (i.e. we do not want the inline-block elements to wrap around to the next row).
Approach: To do this, we have to write the table tag along with the Bootstrap class called table-responsive for each table. This class makes all the tables responsive so that they are at the same place for all types of screens(from xs-lg) and if the screen size is small to fit the tables, the tables automatically get a horizontal scroll bar and the user can look at the extra content of the table by scrolling right. This also avoids the overlapping of tables and makes the page look clean.
Syntax:
<div class="table-responsive">
Example:
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">      <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>
One important thing to remember is that, responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. So, if your table size is large that can go beyond the bottom of the screen then it would be better to add overflow-y: auto inside the <style> tag.
In the above code, we have used https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css inside <head> tag to be able to use the Bootstrap classes to make our life easy. Notice that we have also added the “table table-responsive” class to each table to prevent it from wrapping.
Output:For normal screen size:
For small screen size:
This can also be done using little CSS.Example using text: If we have a lot of text in a div block and we want the text to remain on the same line even after the screen size is reduced, we can add a CSS property called white-space and assign it the value nowrap as shown below:
Approach: First, we take a <div> tag and give it some arbitrary name to apply CSS properties. Both the divs here are filled with some text. We apply the white-space: nowrap; property to class “a” which keeps the line of text in the same line even if the screen size is small.
Syntax:
white-space: nowrap;
Next, we apply white-space: normal; which is the default for “white-space”. This displays the text on multiple lines depending on the size of the screen.
Syntax:
white-space: normal;
Example:
<!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>
Output:
If you try to run it in an IDE you can notice that the text inside the first div block which has white-space: nowrap; does not wrap around to the next line even if the screen size is small. On the other hand, the text in the second div tag wraps up to the next line if it cannot fit in the same line. Please run the code and play with it to get a better understanding of the usage of nowrap.
Bootstrap-Misc
CSS-Misc
HTML-Misc
Picked
Bootstrap
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form