CSS中如果文本超過兩行，可能會導致界面混亂，影響用戶體驗，因此我們需要使用CSS來處理超出兩行的文字。 首先，我們可以使用CSS的text-overflow屬性，該屬性控制文本溢出處理方式。我們可以將其設置為“ellipsis”，表示用省略號代替溢出的文本。代碼如下： pre { white-space: pre-wrap; /* 換行顯示文本 */ word-wrap: break-word; /* 單詞也會斷行 */ overflow: hidden; /* 隱藏超出部分 */ text-overflow: ellipsis; /* 使用省略號代替超出的文本 */ display:block; /* 顯示pre元素 */ width: 200px; /* 寬度為200px */ height: 2em; /* 最多顯示兩行，每行高度2em */ }

這是一段超過兩行的文字，我們來試試使用CSS來處理它的顯示方式。

在添加以上CSS樣式后，我們可以看到文本的顯示方式變為了用省略號代替溢出的文本，并且確保它只占據限定的寬度內的兩行空間。 另外，我們還可以使用CSS的line-clamp屬性來固定文本的行數，從而避免超出兩行。代碼如下： p { display: -webkit-box; /* 將p元素設置為塊級元素 */ overflow: hidden; /* 隱藏超出部分 */ text-overflow: ellipsis; /* 使用省略號代替超出的文本 */ -webkit-box-orient: vertical; /* 垂直排列文本 */ -webkit-line-clamp: 2; /* 最多顯示兩行 */ line-height: 1.5; /* 行高為1.5倍字體大小 */ max-height: 3em; /* 最大高度為3em */ }

這是另一段超過兩行的文字，我們來試試使用CSS中的line-clamp屬性處理它。

以上CSS樣式中，我們將p元素設置為塊級元素，并利用-webkit-box-orient: vertical屬性使文本垂直排列顯示，再利用-webkit-line-clamp: 2屬性設置最多顯示兩行，line-height: 1.5屬性設置行高為1.5倍字體大小，max-height: 3em屬性設置最大高度為3em，確保文本不會超過兩行。 總之，使用上述CSS樣式，可以很好地處理超出兩行的文字，使其不會影響頁面美觀和用戶體驗。