<div> 內容截斷是一種常見的前端開發技術，用于在網頁中限制一段文本或內容的顯示長度。通過設置 div 元素的寬度和高度，并進行一些樣式調整，可以實現將文本內容以特定的方式截斷并顯示。
以下是幾個代碼案例，詳細解釋了如何使用 div 內容截斷的技術。
第一個案例是將一個長文本內容進行截斷顯示，只顯示部分文本，并在文末添加省略號。假設有一個 div 元素，其寬度為 300px，高度為 100px。我們想要將其中的文本截斷顯示，只顯示 3 行，多余的內容則以省略號表示。下面是一個實現該效果的代碼片段：

<div style="width: 300px; height: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
<p>這是一段很長很長很長的文本內容，我們希望只顯示其中的前三行，并使用省略號表示截斷的部分。</p>
</div>

在這個代碼中，我們使用了 CSS 屬性overflow: hidden來隱藏 div 內容超出設定高度的部分。同時，text-overflow: ellipsis屬性表示在截斷處使用省略號來表示截斷的內容。最后，white-space: nowrap屬性確保文本在一行內顯示，避免自動換行。
第二個案例是將一個長文本內容進行截斷顯示，但不添加省略號，而是顯示完整的內容。這種情況下，我們不需要設置text-overflow: ellipsis屬性。下面是一個實現該效果的代碼片段：

<div style="width: 300px; height: 100px; overflow: hidden;">
<p style="margin: 0;">這是一段很長很長很長的文本內容，我們希望只顯示其中的前三行，但不添加省略號表示截斷的部分。</p>
</div>

在這個代碼中，我們同樣使用了overflow: hidden屬性來隱藏超出設定高度的內容。并且使用 CSS 屬性margin: 0將段落的上下邊距設置為 0，避免產生額外的空白間距。
第三個案例是在 div 中截斷顯示一個包含 HTML 標簽的內容。假設有一個 div 元素，我們想要截斷并顯示其中的一部分文本，同時保留 HTML 標簽的格式。下面是一個實現該效果的代碼片段：

<div style="width: 300px; height: 100px; overflow: hidden; text-overflow: ellipsis;">
<p>這是一段包含<a >鏈接</a>的文本內容，我們希望只顯示一部分內容，并在文末添加省略號。</p>
</div>

在這個代碼中，我們同樣使用了overflow: hidden屬性進行內容的截斷顯示。同時，由于要保留 HTML 標簽的格式，我們沒有使用white-space: nowrap屬性來設置不換行。這樣，當內容被截斷時，文本中的 HTML 標簽也會被保留下來。
通過以上的幾個代碼案例，我們可以看到如何使用 div 內容截斷的技術來限制文本或內容的顯示長度。這種技術在很多網頁設計中都是非常有用的，尤其是當需要在有限的空間內展示較長的文本或內容時。通過設置 div 的寬度、高度和一些樣式屬性，我們可以實現不同形式的內容截斷效果，提供更好的用戶體驗。