javascript - 是否只有前 100px 才能获取 div 的内容

Question

能否获取div的前100px的内容

例如

 __________________________
| 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       |
|_________________________|

所以如果我只想获取放在第一个 250px 中的内容它只会给我五行(因为 500px 是十行)。

我可以使用 javascript 或 jQuery 来处理这个问题吗(如果可以，我应该如何管理它？)，或者我应该使用任何插件来管理这个问题(如果可以，哪个插件？)。

Answer 1

我不知道有什么方法可以准确地完成您的要求。然而，通过简单的逻辑，我们也许可以得出一个近似值。推理如下:

1. 找出divHeight
2. 找出 fraction 100px 是 divHeight
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 库本身将文本 chop 为 100 像素。示例:

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>