溢出隱藏顯示省略號的使用方法

在前端開發過程中我們經常需要處理文本溢出的情況，為了美觀和更好的用戶體驗，我們可以通過省略號來隱藏超出部分的文本。在本文中，我們將詳細討論如何使用CSS和JavaScript來實現文本溢出隱藏顯示省略號，包括以下幾個方面：

一、從溢出文本隱藏顯示省略號

當文本超出容器的寬度時，我們可以使用CSS的text-overflow屬性來實現溢出隱藏並顯示省略號。這個方法適用於單行文本，我們只需要將容器的寬度設置為一個固定值，然後設置overflow:hidden和text-overflow:ellipsis屬性即可。

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

這個方法特別適用於標題或者簡短的一句話描述。

二、超出隱藏顯示省略號

如果文本超出容器的高度或者寬度時，我們可以使用JavaScript來實現。當用戶鼠標移動到元素上時，我們顯示完整的文本；當鼠標移開時，我們隱藏部分文本並在末尾顯示省略號。下面是一個使用JavaScript實現超出隱藏顯示省略號的例子：

<div id="text">This is a long text.</div>
<script>
  let text = document.getElementById('text');
  const limit = 10;
  const suffix = '...';
  let title = text.innerHTML;
  if (title.length > limit) {
    title = title.substring(0, limit) + suffix;
    text.setAttribute('title', text.innerHTML);
  }
  text.innerHTML = title;
</script>

在這個例子中，我們將文本限制在10個字符內，如果超過限制就在末尾加上省略號。我們也可以通過添加title屬性來顯示完整的文本。

三、CSS溢出顯示省略號

有些時候，我們需要強制將文本強制顯示出來而不是被隱藏。在這種情況下，我們可以使用CSS的overflow屬性並將其設置為scroll或auto。同時，我們可以使用text-overflow屬性來顯示省略號。下面是一個使用CSS實現溢出顯示省略號的例子：

.ellipsis {
  white-space: nowrap;
  overflow: scroll;
  text-overflow: ellipsis;
}

這個樣式將強制將文本顯示出來，但如果超出容器大小，將自動添加滾動條。省略號將用於摺疊超出容器的部分。

四、溢出顯示省略號

在某些情況下，我們希望文本始終完全顯示，但是也希望在某些情況下使用省略號。這個效果可以通過使用JavaScript來實現，例如在列表中的行數超出指定數量時，我們可以使用省略號。下面是一個使用JavaScript實現溢出顯示省略號的例子：

<div id="text">This is a long text.</div>
<script>
  let text = document.getElementById('text');
  const limit = 2; // set limit to 2 lines
  const suffix = '<br>...'; // add line break before ellipsis
  let lines = text.innerHTML.split('\n');
  if (lines.length > limit) {
    text.innerHTML = lines.slice(0, limit).join('\n') + suffix;
    text.setAttribute('title', text.innerHTML);
  }
</script>

在這個例子中，我們將文本限制在2行內，如果超過限制就在行末添加省略號。注意，在這個例子中，我們將省略號放置在最後一行的末尾。我們還可以設置title屬性來顯示完整的文本。

五、多行文本溢出隱藏且不顯示省略號

在某些情況下，如果文本超出容器大小，我們不希望顯示省略號，也不希望添加滾動條。這時候，我們可以使用CSS的text-wrap和word-break屬性，將文本強制換行並截斷文本。這個解決方法適用於多行文本。下面是一個使用CSS實現多行文本溢出隱藏且不顯示省略號的例子：

.truncate {
  white-space: pre-wrap;
  max-height: 80px; /*set the maximum height*/
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
}

在這個例子中，我們將容器的最大高度設置為80px，並將white-space屬性設置為pre-wrap。我們還將word-wrap和word-break屬性設置為break-word，以防止溢出文本破壞布局。此樣式不添加省略號，但可以強制文本溢出隱藏並截斷文本。

六、文字溢出顯示省略號

在某些情況下，我們希望只截斷一段文本而不是整個容器，這時候我們可以使用CSS的display屬性和JavaScript來處理。下面是一個實現文字溢出顯示省略號的例子：

.truncate {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div id="text-container">
  <div class="truncate" id="text">This is a long text.</div>
  <button onclick="showFullText()">Show All</button>
</div>

<script>
  let text = document.getElementById('text');
  const limit = 10;
  let title = text.innerHTML;
  if (title.length > limit) {
    text.innerHTML = title.substring(0, limit) + '...';
  }

  function showFullText() {
    text.innerHTML = title;
  }
</script>

在這個例子中，我們將文本在一個內聯塊級元素中顯示，並使用white-space屬性將文本限制在一行內。我們還使用overflow和text-overflow屬性將溢出文本截斷並顯示省略號。在JavaScript中，我們為文本添加了一個showFullText()函數，以便在用戶點擊按鈕時顯示完整的文本。

七、CSS文本多行顯示省略號

CSS通常只能使單行文本顯示省略號。但是，有時候我們需要沿着文本的多行顯示省略號而不是只顯示單行。下面是一個實現CSS文本多行顯示省略號的例子：

.truncate {
  display: -webkit-box;
  -webkit-line-clamp: 3; /*set number of lines*/
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="truncate">This is a long text.</div>

在這個例子中，我們將顯示文本的容器添加到內聯塊級元素中，並使用-webkit-box屬性將文本放置在一個box中，並使用-webkit-box-orient屬性設置文本的方向，即垂直（需要使用Webkit內核）。

-webkit-line-clamp屬性定義我們需要顯示的文本的行數，溢出部分將被省略號替代。

八、單行文本溢出顯示省略號

最後，有時候我們在單個容器中需要截斷並顯示省略號，這個情況下我們可以使用CSS屬性text-overflow。這是一個簡單的方法只適用於單行文本，但它非常有效，使用方便。下面是一個實現單行文本溢出顯示省略號的例子：

<style>
  .truncate {
    width: 250px; /* set width */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<div class="truncate">This is a long text.</div>

在這個例子中，我們為容器設置固定寬度，並使用white-space屬性將文本限制在一行內。我們還將overflow和text-overflow屬性設置為hidden和ellipsis，以將溢出文本截斷並顯示省略號。