How to prevent inline-block divs from wrapping ?
Last Updated :
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=
<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">
<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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...