CSS高度如何不被撐開 在網頁設計中，CSS的高度是一個十分重要的屬性。當我們想要控制網頁中某個元素的高度時，我們經常會遇到一個問題：當元素中的內容過多時，會撐開整個元素，影響整個頁面的布局。那么，怎么才能讓元素的高度不被撐開呢？接下來，我們就來學習一下。 一、使用overflow屬性 overflow屬性可以用來控制內容溢出的部分如何展示，包括隱藏、滾動、溢出等。我們可以使用overflow:hidden來限制元素的高度，當內容高度超過元素高度時，超出的部分會被隱藏。例如：

p {
height: 100px;
overflow: hidden;
}

二、使用max-height屬性 max-height屬性可以限制元素的最大高度，當內容高度超過最大高度時，元素會自動滾動。例如：

p {
max-height: 100px;
overflow: auto;
}

overflow: auto的意思是，當元素中的內容高度超過設定的高度時，會自動出現滾動條。 三、使用flex布局 使用flex布局可以使元素自適應高度，并且不會撐開整個布局。例如：

.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100px;
}
p {
flex: 1;
}

在這個例子中，我們使用了flex布局，并設置了容器的高度為100px，在p標簽中使用了flex:1，即讓p標簽自適應高度，不會撐開整個布局。 總結 以上就是三種常見的方法來控制元素高度不被撐開的方法。使用overflow、max-height和flex布局分別可以滿足不同的需求，需要根據具體情況進行選擇。同時，應該注意不要過度控制元素高度，過度的限制可能會影響用戶的使用體驗。