使用 Range API 截断文本答案

【问题标题】：Truncate text with Range API使用 Range API 截断文本
【发布时间】：2018-08-26 15:57:00
【问题描述】：

我有一个带有文本的 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>

【问题讨论】：

标签： javascript html css truncate

【解决方案1】：

看看

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

说明：你可以制作容器

可滚动：通过使用溢出：自动；
不可滚动：使用溢出隐藏其余内容：隐藏

【讨论】：

【解决方案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>

【讨论】：