截断范围为 API 的文本

Question

我有一个 div 的文本，我想截断它，因为只有一个文本可以容纳。下面的代码。在互联网上我只找到了一个依赖 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

Take a look

.container {
  height: 100px;
  border: 1px solid black;
  overflow: auto;       /* Try using hidden, scroll, auto or overlay */
}

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

Explanation: You can either make the container

可滚动：使用溢出：自动；
不可滚动：通过使用 overflow: hidden

Answer 2

你可以这样使用：

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>

截断范围为 API 的文本

Truncate text with Range API

javascript

html

css

truncate