Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to prevent inline-block divs from wrapping?
In CSS, the ‘display’ property is used to set the display of the children elements. When we set the ‘inline-block’ value for the display property, it shows all children elements side by side. Also, it creates a responsive design automatically as if it doesn’t find enough space, it automatically wraps the children elements.
Sometimes, we require to stop wrapping children elements to manage the space of the web pages. In such cases, we can manage the ‘white-space’ property of the CSS to avoid wrapping the children elements.
Syntax
Users can follow the syntax below to prevent inline-block divs from wrapping by using the ‘white-space’ CSS property.
CSS_selector {
white-space: nowrap;
}
In the above syntax, CSS_selector is the parent element of all children elements for which we set the ‘inline-block’ display.
Let’s understand preventing the inline-block elements from wrapping via the example below.
Example 1
In the example below, we created the parent div element containing the ‘container’ class name. After that, we added three child elements inside the parent container, and every child element contains the ‘inline-block-div’ class name.
In CSS, we used the ‘white-space: no-wrap’ CSS property for the parent container and the ‘display: inline-block’ for all children elements. Also, we used some other CSS properties to style the div element.
In the output, users can try to decrease the size of the browser window and observe that inline-block div elements are not wrapping and not going into the next line.
<html>
<head>
<style>
.container {
white-space: nowrap;
}
.inline-block-div {
display: inline-block;
width: 200px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
</style>
</head>
<body>
<h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
<div class = "container">
<div class = "inline-block-div"> Div 1 </div>
<div class = "inline-block-div"> Div 2 </div>
<div class = "inline-block-div"> Div 3 </div>
</div>
</body>
</html>
Example 2
In the example below, we added multiple tables containing different data. The first table contains the school data, and the second contains the AC data.
We set the display equal to the inline block for both tables to show them side by side on the web page. Also, we used the ‘white-space’ property with the ‘container’ div element.
In the output, we can observe two table side by side, and if we decrease the window size, the table is not going into the next line as we prevent two table elements from wrapping.
<html>
<head>
<style>
.container {white-space: nowrap;}
.table {white-space: nowrap; display: inline-block; vertical-align: top; margin: 10px; border: 1px solid black;}
th, td {padding: 10px 40px; border: 1px solid black;}
</style>
</head>
<body>
<h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
<div class = "container">
<table class = "container table">
<tr><th> school Name </th> <th> Total Students </th> </tr>
<tr><td> ABC School </td> <td> 100 </td></tr>
</table>
<table class = "container table">
<tr><th> AC brand </th> <th> color </th><th> Price </th></tr>
<tr><td> LG </td> <td> White </td> <td> 10000 </td> </tr>
</table>
</div>
</body>
</html>
Example 3
In the example below, we demonstrated to prevent the inline-block div elements from wrapping conditionally. We can use JavaScript if we require to prevent inline-block div elements from wrapping in any particular condition.
In JavaScript, we access all div elements and use the forEach() method to iterate through all div elements. We use the ‘whitespace’ property of the style object to prevent all inline-block divs from wrapping using JavaScript.
<html>
<head>
<style>
.child {width: 300px; background-color: blue; height: 200px; display: inline-block; margin: 10px; color: white; font-size: 30px;}
</style>
</head>
<body>
<h2> Preventing the <i> inline-block divs </i> from wrapping </h2>
<div class = "parent">
<div class = "child"> First </div>
<div class = "child"> Second </div>
<div class = "child"> Third </div>
<div class = "child"> Fourth </div>
</div>
<script>
let divs = document.querySelectorAll('div');
let divsArray = Array.from(divs);
// add white-space: nowrap to all div
divsArray.forEach(div => {
div.style.whiteSpace = 'nowrap';
});
</script>
</body>
</html>
Users learned to prevent the inline-block div elements from wrapping. We used the ‘white-space’ CSS property to prevent div elements from wrapping. However, it is not a good practice to prevent inline-block div elements from wrapping as it removes the responsiveness of the web page, but in some particular conditions, we can prevent that if we don’t want to expand the div elements vertically.
1K+ Views
