How to prevent inline-block divs from wrapping ?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.