在CSS中，‘display’屬性用來設定子元素的顯示。當我們為 display 屬性設定「inline-block」值時，它會並排顯示所有子元素。此外，它會自動建立響應式設計，就好像它沒有找到足夠的空間一樣，它會自動包裹子元素。
有時，我們需要停止包裝子元素來管理網頁空間。在這種情況下，我們可以管理 CSS 的「white-space」屬性，以避免包裹子元素。
使用者可以遵循以下語法，使用「white-space」CSS 屬性來防止內聯區塊 div 換行。
CSS_selector {
white-space: nowrap;
}
在上面的語法中，CSS_selector是我們設定「inline-block」顯示的所有子元素的父元素。
讓我們透過下面的範例來了解如何防止內聯塊元素換行。
在下面的範例中，我們建立了包含「container」類別名稱的父 div 元素。之後，我們在父容器中新增了三個子元素，每個子元素都包含「inline-block-div」類別名稱。
在 CSS 中，我們對父容器使用「white-space: no-wrap」CSS 屬性，對所有子元素使用「display: inline-block」。此外，我們也使用了一些其他 CSS 屬性來設定 div 元素的樣式。
在輸出中，使用者可以嘗試減少瀏覽器視窗的大小，並觀察內聯塊 div 元素沒有換行，也沒有進入下一行。
<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>
在下面的範例中，我們新增了多個包含不同資料的表格。第一個表格包含學校數據，第二個表格包含 AC 資料。
我們將兩個表的顯示設定為等於內聯區塊，以便在網頁上並排顯示它們。此外，我們將「white-space」屬性與「container」div 元素一起使用。
在輸出中，我們可以並排觀察兩個表格，如果我們減少視窗大小，表格不會進入下一行，因為我們防止兩個表格元素換行。
<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>
在下面的範例中，我們示範如何防止內聯區塊 div 元素有條件地換行。如果我們需要防止內聯區塊 div 元素在任何特定條件下換行，我們可以使用 JavaScript。
在 JavaScript 中，我們存取所有 div 元素並使用 forEach() 方法迭代所有 div 元素。我們使用樣式物件的「whitespace」屬性來防止所有內聯區塊 div 使用 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>
使用者學會如何防止內聯塊 div 元素換行。我們使用「white-space」CSS 屬性來防止 div 元素換行。然而，阻止內聯區塊 div 元素換行並不是一個好的做法，因為它會消除網頁的回應能力，但在某些特定情況下，如果我們不想垂直擴展 div 元素，我們可以阻止這種情況。
以上是如何防止inline-block div換行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
