以下是原文翻译成繁體中文的版本，使用Markdown格式：

Bootstrap - Text Truncation

# Bootstrap - 文字截断：初學者指南

你好，未來的網頁開發者們！今天，我們將深入一個令人興奮的主題，幫助你創建有型且專業看起來的網站：Bootstrap的文字截斷功能。別擔心你是新手——我會像祖母教孫子烘餅乾一樣，耐心地指導你每一步。我們開始吧！

## 什麼是文字截斷？

在我們進入Bootstrap的具體細節之前，讓我們先了解文字截斷到底是什麼。想像一下，你有一個很長的句子，它不適合你的設計。文字截斷就像給這個句子理個時尚的髮型——它修剪掉多餘的部分，並加上省略號（...）來表示還有更多內容可讀。

例如：
"The quick brown fox jumps over the lazy dog" 可能會變成 "The quick brown fox..."

現在，讓我們看看Bootstrap如何讓這件事變得簡單！

## Bootstrap的.text-truncate類

Bootstrap，我們友好的鄰居CSS框架，為我們提供了一個簡單的類叫做 `.text-truncate`。這個類就像一根魔法棒，自動為我們截斷文字。

### 如何使用.text-truncate

要使用這個類，你只需將它添加到包含你的文本的HTML元素中。這裡有一個基本示例：

```html
<div class="text-truncate">
  The quick brown fox jumps over the lazy dog.
</div>

當你應用這個類時，Bootstrap會：

設置 display: inline-block 或 display: block
設置 overflow: hidden
添加 text-overflow: ellipsis
設置 white-space: nowrap

這些CSS屬性一起工作，創造出截斷效果。

實際範例

讓我們看看一些你可能會使用文字截斷的實際場景。

範例1：截斷一段文字

<p class="text-truncate" style="max-width: 150px;">
  這是一段非常長的文本，將使用Bootstrap的文字截斷類進行截斷。
</p>

在這個例子中，我們添加了 max-width 來演示文字在有限空間內的截斷效果。文字會被切斷，並在150px的位置出現省略號。

範例2：在網格系統中截斷文字

Bootstrap的網格系統非常適合創建響應式佈局。讓我們看看如何在網格中使用文字截斷：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <h2 class="text-truncate">這是一個很長的標題，將被截斷</h2>
      <p>這裡有一些內容</p>
    </div>
    <div class="col-md-4">
      <h2 class="text-truncate">另一個長標題用於演示</h2>
      <p>這裡有更多的內容</p>
    </div>
    <div class="col-md-4">
      <h2 class="text-truncate">還有另一個長標題來展示截斷</h2>
      <p>甚至更多的內容</p>
    </div>
  </div>
</div>

在這個網格佈局中，如果標題變得太長，每個列都會截斷其標題。這在屏幕尺寸多變的響應式設計中特別有用。

何时使用文字截斷

文字截斷是一個強大的工具，但就像Uncle Ben對蜘蛛俠說的那樣，"力量越大，責任越大"。以下是一些文字截斷發光的情況：

有空間限制的卡片佈局
表格單元格中可能包含長內容
選單中的長項目名稱
新聞滾動條或滾動標題

記住，目標是提高可讀性並保持乾淨的設計，而不是從用戶那裡隱藏重要信息。

可訪問性考慮

作為負責任的網頁開發者，我們必須始終考慮可訪問性。雖然文字截斷可以改善我們設計的視覺吸引力，但它也可能從屏幕閱讀器中隱藏重要信息。

為了處理這個問題，請考慮以下幾點：

使用 title 屬性提供完整的文本：

<p class="text-truncate" title="這是完整的文本，將在悬停時顯示">
  這是完整的文本，將在悬停時顯示
</p>

為重要的截斷內容提供 "閱讀更多" 链接：

<div>
  <p class="text-truncate">這是一些被截斷的重要信息...</p>
  <a href="#full-content">閱讀更多</a>
</div>

高級技巧

對於那些想嘗試更多挑戰的人，讓我們探索一些高級技巧！

多行截斷

Bootstrap的 .text-truncate 類只對單行有效。但別擔心！我們可以用一點自定義CSS創造多行截斷效果：

<style>
  .truncate-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>

<p class="truncate-3-lines">
  這是一段更長的文本，將在三行後被截斷。
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua.
</p>

這段CSS使用 -webkit-line-clamp 屬性將文本限制在三行。請注意，這不是在所有浏览器中都完全支持的，所以一定要徹底測試！

响應式截斷

有時候，你可能只想在特定的屏幕尺寸上應用截斷。我們可以將Bootstrap的響應式工具與我們的截斷類結合使用：

<p class="text-truncate d-none d-md-block">
  這段文本將只在中等屏幕和大屏幕上被截斷。
</p>

在這個例子中，文本將在小屏幕上被隱藏，並在中等屏幕及以上尺寸上顯示截斷。

結論

好了，各位！我們已經穿越了Bootstrap文字截斷的世界，從基本使用到一些高級技巧。記住，像網頁開發中的任何工具一樣，文字截斷在使用時要考慮周全，並適度使用。

在你繼續網頁開發的冒險中，繼續嘗試這些概念。嘗試將文字截斷與Bootstrap的其他功能結合使用，或者創建你自己的自定義截斷樣式。網絡是你的畫布，現在你就有了新的畫筆！

快樂編程，願你的文本總是完美截斷！?✨

方法	描述
`.text-truncate`	基本的Bootstrap類，用於單行截斷
`title` 屬性	提供完整的文本，在悬停時顯示，以增加可訪問性
自定義CSS多行	允許在指定行數後截斷
响應式截斷	結合Bootstrap工具，為特定屏幕尺寸應用截斷

Credits: Image by storyset