<div 限制行數（truncate）是一種常見的前端開發技巧，用于限制某個區塊（如文字塊）顯示的行數，超出行數的部分將被省略或以省略號表示。這在設計和排版中經常用到，特別是在展示長段落或文章摘要時，可以使界面更簡潔，提升用戶體驗。本文將通過幾個代碼案例詳細解釋div 限制行數的實現方法，并參考其他文章的真實案例。

，我們來看一個簡單的代碼案例：

<div class="line-clamp">
這是一段需要限制行數的長文本。
</div>

在這個案例中，我們使用了一個名為line-clamp的類名，它是實現div限制行數的關鍵。在CSS樣式中，我們可以使用該類名定義限制行數的樣式：

.line-clamp {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; 
-webkit-box-orient: vertical;
}

在上述代碼中，我們給<div>元素添加了overflow: hidden;屬性，將超出限制行數的內容進行隱藏。然后使用display: -webkit-box;屬性將<div>元素的顯示方式設為布局盒子。接下來，通過-webkit-line-clamp屬性設置限制的行數為3行。最后，使用-webkit-box-orient: vertical;屬性將文本垂直排列。

在某些瀏覽器中，為了兼容性考慮，我們還需要添加其他瀏覽器前綴：

.line-clamp {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
}

這樣，無論是在使用WebKit內核的瀏覽器、Mozilla內核的瀏覽器還是Opera內核的瀏覽器中，都能正常顯示限制行數。

除了使用CSS樣式實現限制行數外，我們還可以借助JavaScript來動態計算文字的行數，并進行自動截斷。

下面是一個使用JavaScript實現限制行數的代碼案例：

let text = document.querySelector(".line-clamp-text");
let lineHeight = parseInt(window.getComputedStyle(text).lineHeight);
let maxHeight = lineHeight * 3;
<br>
    if (text.offsetHeight > maxHeight) {
text.style.overflow = "hidden";
text.style.height = maxHeight + "px";
}

在這個代碼中，我們獲取了一個類名為line-clamp-text的元素。然后使用window.getComputedStyle()方法獲取元素的行高，將其轉換為數值類型。接著，我們計算了限制行數后的最大高度。如果元素的實際高度超過了最大高度，就將其溢出隱藏，并將元素的高度設為最大高度。

通過以上這些案例，我們可以靈活運用CSS和JavaScript來實現<div>限制行數的效果。無論是使用CSS樣式還是JavaScript代碼，限制行數的技巧都能幫助我們更好地控制長文本的顯示，使界面更簡潔美觀。

參考文章：

1. CSS Trick: Line Clampin': https://css-tricks.com/line-clampin/

2. Truncate Text with CSS: https://css-tricks.com/snippets/css/truncate-text/

3. Truncate (Ellipsis) Text with JavaScript: https://css-tricks.com/snippets/javascript/truncate-text-with-ellipsis/

文章長度：808字