CSS超出…

CSS中的「超出…」是一種可視化效果，可用於防止內容在頁面上溢出，並顯示省略號。這種效果在Web設計中非常常見，因為它可以使文本、圖像和其他內容在不妨礙布局或影響用戶體驗的情況下更加美觀和易於理解。在本文中，我們將深入探討CSS中的「超出…」效果，並且提供相關的CSS代碼示例，以供參考。

一、CSS超出顯示省略號

當內容超出了容器的最大寬度或高度時，可以使用「text-overflow」屬性來實現省略號的效果。為了使這個效果生效，還需要將「white-space」屬性設置為「nowrap」，它的作用是禁止內容換行。

   .container {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }

二、CSS超出寬度省略號

此效果與上一個效果類似，但不同的是，在這種情況下，省略號將顯示在文本或內容的末尾。同樣需要將「white-space」屬性設置為「nowrap」。

   .container {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      white-space: nowrap;
   }
   .long-content {
      display: inline-block;
      white-space: nowrap;
   }

三、CSS超出隱藏

當需要隱藏超出容器的內容時，可以設置「overflow」屬性為「hidden」。

   .container {
      width: 200px;
      height: 50px;
      overflow: hidden;
   }

四、CSS超出一行變省略號

當內容過長時，只需將「max-height」屬性設置為一行的高度，並將「text-overflow」設置為「ellipsis」。

   .container {
      max-height: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      white-space: nowrap;
   }

五、CSS超出換行

如果需要每次超出內容自動換行，可以將「word-wrap」和「word-break」屬性設置為「break-word」。

   .container {
      width: 200px;
      word-wrap: break-word;
      word-break: break-word;
   }

六、CSS超出加滑輪

當容器的最大寬度和高度固定時，可以設置「overflow」屬性為「auto」，這將自動顯示一個滾動條。

   .container {
      width: 200px;
      height: 100px;
      overflow: auto;
   }

七、CSS超出部分隱藏

在文本的開頭或結尾處顯示省略號。

   .container {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
   .content {
      display: inline-block;
   }

八、CSS超出部分顯示省略號

省略號顯示在超出容器的末尾。

   .container {
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
   }
   .content {
      white-space: nowrap;
      display: inline-block;
   }

九、CSS超出不邊框省略

可以使用「clip」屬性實現不使用邊框的超出省略。

   .container {
      width: 200px;
      height: 100px;
      position: relative;
      border: none;
   }
   .content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
      clip: rect(0, auto, auto, 0);
   }

這些是CSS中幾種常見的「超出…」效果。根據你的需求，選擇這些效果中的任何一種即可實現你所需的效果。