How to prevent inline-block divs from wrapping ?
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.
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.
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.
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.
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.