javascript - 是否可以动态获取适合固定宽度的文本的最后一行？

Question

这是一个 example :

<div class="parent">
  Contrary to popular belief Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</div>

这个 div 的宽度为 200 像素，我需要捕捉在浏览器中可以看到的最后一行，并用 span 将其包裹起来。如<span>it over 2000 years old.</span>就我而言。

这可以用 jquery/javascript 实现吗？或者至少得到这个“最后”行的长度。

编辑:我想我找到了一个好方法:https://jsfiddle.net/qqkxyq42/2/

Answer 1

这可能比您希望的更硬核，但是您可以检查父级的高度，然后开始逐字删除，每次迭代都检查它，直到高度发生变化。然后您就会知道最后一行从哪个单词或符号开始。

var words = text.split(' '); // An array of all the words split by spaces, since that's where text breaks by default.
var lastLine = []; // Put all words that don't change the height here.
var currentHeight = parentEl.clientHeight; // The starting height.

while(words[0]){
  parentEl.innerText = words.join(' ');
  if (parentEl.clientHeight < currentHeight) {
    var span = document.createElement('span');
    span.innerText = lastLine.join(' ');
    parentEl.appendChild(span);
    break;
  }

  lastLine.shift(words.pop);
}

我假设您这样做是为了以某种方式设置文本样式，目前有一个名为 first-line 的伪选择器，它针对选择器上的第一行文本，然而，我们还没有看到 last-line 或 nth-line(#) 选择器，这很遗憾，因为它似乎是一个非常合理的东西。