javascript - 使用 Range API chop 文本

Question

我有一个带有文本的 div，我想将其 chop ，因为其中一个只剩下可以容纳的文本。下面的代码。在互联网上我只找到了一个依赖于 JQuery 的插件，但我知道，可以用 Range 来做，如果有人有经验，请告诉我，怎么做。

.container {
  height: 60px;
  border: 1px solid black;
}

<div class="container">
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
</div>

Answer 1

你可以这样使用:

const container = document.querySelector('.container');
let lines = container.querySelectorAll('.text');

const bottomLine = container.getBoundingClientRect().bottom;
for (let line of lines) {
  if (line.getBoundingClientRect().bottom > bottomLine) {
    container.removeChild(line);
  }
}

.container {
  height: 60px;
  border: 1px solid black;
}

<div class="container">
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
  <div class="text">Lorem lorem lorem lorem lorem</div>
</div>