父元素有紅色虛線邊框，子元素填充藍色。它可以通過實作inline-block，float，flex等。
我想實作這樣的效果：當父元素的寬度太小而無法包含最后一個子元素時，最后一個元素將被隱藏。
如何使用純 CSS 或最少的 JavaScript 實作這一點？
uj5u.com熱心網友回復：
將父容器的溢位屬性設定為隱藏可以為您做到這一點。
uj5u.com熱心網友回復：
如果您的 html 結構是靜態的，您可以嘗試查看媒體查詢。否則，我不確定在 CSS 中是否可行。
使用 overflow: hidden 在你的父元素上不會讓最后一個孩子消失，直到它完全溢位。
uj5u.com熱心網友回復：
有一種方法可以使用max-width,max-height和來做到這一點overflow，如下例所示：
.parent {
max-width: 400px;
max-height: 60px;
overflow: hidden;
border: 1px dashed #ddd;
}
.child {
width: 100px;
height: 50px;
margin: 5px;
background-color: blue;
display: inline-block;
color: white;
text-align: center;
}<p>There are 5 items here</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>這是另一個使用flex代替的例子display: inline block；有max-width，max-height而且overflow太
.parent {
display: flex;
border: 1px dashed #ccc;
max-width: 380px;
max-height: 60px;
overflow: hidden;
flex-wrap: wrap;
}
.child {
background-color: blue;
width: 100px;
height: 50px;
margin: 5px;
}<pAnother example, using flex, with 5 items too</p>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/363313.html
標籤：javascript html css 反应
上一篇：錯誤com.fasterxml.jackson.core.JsonParseException：無法識別的令牌
下一篇：回傳輸入值