如何實現CSS文本兩行超出隱藏？

一、CSS overflow 屬性

要實現CSS文本兩行超出隱藏，我們可以使用CSS overflow屬性。overflow屬性定義了當一個容器內部的內容超出容器的尺寸時該怎麼辦。

當我們設置overflow: hidden;時，內容超出容器的部分將被隱藏。

代碼示例：

.container {
  height: 40px; /* 設置容器高度 */
  overflow: hidden; /* 隱藏容器內部超出的內容 */
}

二、CSS text-overflow 屬性

當我們使用overflow: hidden;時，容器內部超出的文本會被隱藏，但這可能導致文本截斷，看起來不夠好看。為了實現文本兩行超出隱藏，我們可以使用CSS text-overflow屬性。

text-overflow屬性規定了當文本溢出包含它的元素時發生的事情，我們可以使用它來添加省略號來表示被截斷的文本。

代碼示例：

.container {
  width: 200px; /* 設置容器寬度 */
  white-space: nowrap; /* 強制在一行中渲染文本 */
  overflow: hidden; /* 隱藏容器內部超出的內容 */
  text-overflow: ellipsis; /* 添加省略號 */
}

三、使用多行文本省略號

如果我們需要支持多行文本溢出隱藏，我們可以使用CSS的display屬性和偽元素來實現。

我們可以將元素設置為display: -webkit-box; 將文本設置為-webkit-box-orient: vertical;，這樣我們就可以將文本垂直顯示。我們還可以使用偽元素來添加省略號。

代碼示例：

.container{
  width: 200px; /* 設置容器寬度 */
  height: 80px; /* 設置容器高度 */
  display: -webkit-box; /* 使用 box 布局 */
  -webkit-box-orient: vertical; /* 設置元素垂直排列 */
  overflow: hidden; /* 隱藏超出範圍的內容 */
}

.container::after {
  content: "";
  display: inline-block;
  width: 1em; /* 加上省略號所佔據的空間 */
  margin-left: 3px; /* 省略號與文本之間的距離 */
  background: #fff; /* 隱藏省略號 */
}

四、小結

以上就是如何實現CSS文本兩行超出隱藏的幾種方法，我們可以根據自己的需求選擇不同的方法來實現。CSS的強大之處在於它提供了很多方法來控制元素的布局和外觀，我們可以根據需要選用最適合的樣式進行美化。