CSS 如何只顯示兩行內容
想要在網頁上只顯示兩行內容，可以使用 CSS 中的 `overflow` 屬性來實現。
首先，在要顯示內容的容器中添加一個固定高度的容器，例如：
```html```
然后，給該容器添加樣式：
```css
.content-box {
height: 40px;
overflow: hidden;
position: relative;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
margin: 0;
padding: 0;
line-height: 1.5em; /* 每行文字高度 */
max-height: 3em; /* 最多顯示兩行文字 */
overflow: hidden;
text-overflow: ellipsis; /* 文字超出部分顯示省略號 */
white-space: normal; /* 自動換行 */
}
```
這樣，在 `content-box` 容器內，只會顯示兩行高度的內容，并且當內容超過兩行時，多余的部分會自動省略并顯示省略號。
上述 CSS 中的 `position: absolute`、`top: 0`、`left: 0`、`width: 100%` 和 `height: auto` 則是為了讓內容能夠自適應寬度，并且在容器底部顯示完整。同時設置 `line-height` 和 `max-height` 屬性來控制顯示行數，使其在兩行內顯示。在實際使用中，可以根據需求更改 `line-height` 和 `max-height` 的數值來滿足不同的布局需求。
最后，值得注意的是，為了讓文字對齊更美觀，還需將 `pre` 元素的字體大小調整到和 `p` 元素相同。
```css
pre {
font-size: 16px;
}
```
這是一段需要顯示的內容
上一篇CSS如何圖片兩行三列
下一篇CSS如何處理兼容模式