僅在前100像素時才可以獲取div的內容

Question

是否有可能獲得放置在div的前100px中的div的內容。

例如

 __________________________
| this is some text       |
| this is some text       |
| this is some text       |
| this is some text       |
| this is some text       |
| this is some text       | 500px
| this is some text       |
| this is some text       |
| this is some text       |
| this is some text       |
|_________________________|

因此，如果我只想獲取放置在前250像素中的內容，它將只給我五行（因為500像素中有十行）。

我可以使用javascript或jQuery處理此問題（如果可以的話，應該如何管理？），還是應該使用任何可以管理此插件的插件（如果可以的話，使用哪個插件？）。

Answer 1

我不知道有什么方法可以准確地完成您所要求的。 但是，通過簡單的邏輯，我們也許可以得出一個近似值。 理由如下：

1. 找出divHeight
2. 找出100px是divHeight的fraction
3. 獲取div中的所有文本。 獲取該文本的fraction長度。

樣品：

 var div = document.getElementById('test'); var divHeight = div.getBoundingClientRect().height; var fraction = 100/divHeight; fraction = fraction > 1 ? 1 : fraction; var text = div.innerText; var truncated = text.substring(0, Math.floor(fraction * text.length)); console.log(truncated); 

 #test{ border: 1px solid black; width: 100px; position: relative; } div#overlay{ width: 100px; position: absolute; top:0; left:0; height: 100px; background: rgba(0,0,0,0.3); } 

 <div id="test"> Lorem ipsum dolor amet street art listicle copper mug meditation roof party bicycle rights kickstarter meggings lomo. Cardigan hell of lumbersexual live-edge organic edison bulb, tattooed tumeric gluten-free. Af normcore disrupt fanny pack, venmo brooklyn helvetica squid blue bottle ugh stumptown taxidermy authentic copper mug. Authentic tacos humblebrag lyft vexillologist lo-fi poke paleo 8-bit pabst selvage crucifix. Chartreuse pitchfork portland hammock literally actually neutra la croix hell of migas meditation you probably haven't heard of them. <div id="overlay"></div> </div> 

缺點：

1. 如果文本未占據div的整個高度，則此操作將失敗。
2. 它不會完美處理斷點和不同間距的字體
3. 它不能很好地處理100px標記在一行中間的情況

注意：

也許更健壯的方法是通過遞歸使用二進制搜索，直到觀察到字符串長度占據100px高度為止。 我已經在shaveJS庫中看到了這一點。

事后想想，您可以使用ShaveJS庫本身將文本截斷為100px。 樣品：

 var div = document.getElementById('test'); var divHeight = div.getBoundingClientRect().height; // Let Shave do it's truncation magic shave('#test', 100); // Get the truncated value var truncated = div.innerText; // Reset the div to it's original height; shave('#test', divHeight); console.log(truncated); 

 #test{ border: 1px solid black; width: 100px; position: relative; } body{ position: relative; } div#overlay{ width: 100px; position: absolute; top:0; left:0; height: 100px; background: rgba(0,0,0,0.3); border: 1px solid rgba(0,0,0,0.3); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/shave/2.1.3/shave.min.js"></script> <div id="test"> Lorem ipsum dolor amet street art listicle copper mug meditation roof party bicycle rights kickstarter meggings lomo. Cardigan hell of lumbersexual live-edge organic edison bulb, tattooed tumeric gluten-free. Af normcore disrupt fanny pack, venmo brooklyn helvetica squid blue bottle ugh stumptown taxidermy authentic copper mug. Authentic tacos humblebrag lyft vexillologist lo-fi poke paleo 8-bit pabst selvage crucifix. Chartreuse pitchfork portland hammock literally actually neutra la croix hell of migas meditation you probably haven't heard of them. </div> <div id="overlay"></div> 

Answer 2

您不僅僅意味着：

div {
 height:250px;
 overflow:hidden;
}

或者，如果您需要計算它，請設置具有所需高度的樣式屬性？

Answer 3

我相信以下CSS可以解決您的問題。 將myClass替換為父容器的名稱。

.myClass{
    overflow: scroll;
    height: 250px;
}