仅在前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;
}